角2动态修改DOM元素

Question

这是关于我想做的事情的jQuery演示。

HTML：

<div class="open-close">
  <div class="open">
    I'm open <span class="opener">opener</span>
  </div>
  <div class="close">
    I'm close <span class="closer">closer</span>
    <div class="open-close">
      <div class="open">
        I'm inner open. <span class="opener">opener</span>
      </div>
      <div class="close">
        I'm inner close. <span class="closer">closer</span>
      </div>
    </div>
  </div>
</div>

jQuery：

$(function(){
  $(".close").hide();

  $(".opener").click(function() {
    let $this = $(this),
      $parent = $this.closest(".open-close"),
      $close  = $parent.children(".close");

    console.log($parent);

    $close.show();
  });

  $("body").on("click", ".closer", function() {
    let $this = $(this),
      $close  = $this.closest(".close");

    $close.hide();
  });
});

现在，我知道使用带有角2的jQuery是不受欢迎的，那么使用角2的方法是什么呢？

在我的应用程序中，服务器将向HTML发送类似于我在演示中提供的内容，并期望应用程序隐藏所有的“关闭”元素，并在“opener”上打开它们。目前，这是我的设计。

我认为给“关闭”和“打开”元素局部变量，而不是'data- id '，然后分别使用‘密切’和‘开’的子元素，使用局部变量，找到其打开/关闭计数器部分与相同的id，然后打开/关闭它。

<div class="open" #data-id="1">
  I'm open <span class="opener" (click)="onOpenerClick(data-id)">opener</span>
</div>
<div class="close" #data-id="1">
  I'm close <span class="closer" (click)="onCloserClick(data-id)">closer</span>
  <div class="open" #data-id="2">
    I'm inner open. <span class="opener" (click)="onOpenerClick(data-id)">opener</span>
  </div>
  <div class="close" #data-id="2">
    I'm inner close. <span class="closer" (click)="onCloserClick(data-id)">closer</span>
  </div>
</div>

我真的不知道用角度2来做这个，这个柱塞演示是我所能得到的。

@Component({
  selector: 'my-app',
  template: `
    <div>
      I'm open. <span (click)="opened=true">opener</span>
      <div *ngIf="opened">
        I'm close <span (click)="opened=false">closer</span>
        <div>
          I'm inner open. <span (click)="opened2=true">opener</span>
          <div *ngIf="opened2">
            I'm inner close <span (click)="opened2=false">closer</span>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ['span { color : blue }']
})
export class App {
  opened = false;
  opened2 = false;
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

但是HTML来自服务器。我必须以编程方式附加'opened‘~ 'openedN’吗？我希望子元素能够设置最近的父元素的“打开”状态。还是有更简单的方法？

Answer 1

我找到了三种方法。

1. ElementRef…plnkr演示
2. 渲染器…plnkr演示
3. DomSanitizer…plnkr演示

ElementRef不安全，根据角度文献的说法，这使得代码与Worker不兼容。

ElementRef

ElementRef.nativeElement返回可以像在JavaScript中那样应用事件的本机元素。

this.el.nativeElement.onclick = function() {
  alert('hi');
}

与javascript相比

document.getElementById('target').onclick = function() {
   alert('hi');
}

渲染器

Renderer建议Renderer不要使用ElementRef，而是“看看Renderer，它提供了可以安全使用的API，即使不支持直接访问ElementRef文档中的原生元素”。

let target_el = this.el.nativeElement;

this.renderer.listen(target_el, "click", function() {
  alert('hi..');
});

从演示中可以看到，this.el示例中的ElementRef示例和Renderer示例是相同的。

• 老实说，我不知道当他们都使用相同的this.el__时，使用渲染器如何更安全。但是，我假设使用像renderer.listen这样的呈现器方法将事件附加到DOM中，从而通知something，注意目标_el的输入或其他什么，而直接访问DOM却没有机会通知that。如果你知道它的工作原理，请发表评论。我很乐意编辑问题。

DOM消毒剂

使用bypassSecurityTrustHtml来防止一些有角的属性脱落。角剥离角事件生成和Html事件属性。您可以尝试在上面的演示中注释bypassSecurityTrustHtml，它将给您提供

警告:清除HTML中的某些内容(请参阅http://g.co/ng/security#xss)。

在我的例子中，因为我是从服务器获得HTML的，所以我必须等待一个滴答才能这样做：

.subscribe( html => {
    setTimeout( () => {
        this.html_area = html;

        // do dynamically adding event thing
    )}
})