如何让 Angular2 RC1 知道更改 DOM

Question

这实际上是的副产品，不过用例要简单得多。它是关于如何让 Angular2 知道有外部添加的 DOM 元素包含 Angular 指令。在这种情况下，我添加了一个新的点击按钮，其点击事件从不绑定。 Imo 我认为 Zone 会自动检测其组件模板中的任何更改，显然它不会。有没有人能够在没有为按钮创建新组件并通过 DynamicLoaderComponent 加载它的巨大开销的情况下使该代码工作？

注意：我已经添加了 NgZone 和 ChangeDetectorRef 来试用。都不适合我。

这里是 plunkr 上的完整示例 link：plnkr.co/edit/hf180P6nkxXtJDusPdLb

这是组件的相关摘录：

import {Component, AfterViewInit, ChangeDetectorRef, NgZone, Renderer} from '@angular/core'

@Component({
    selector: 'my-app',
providers: [],
template: `
<div>
<p><button on-click="clickMe()">This works</button></p>

<div id="insert-here"></div>

</div>
`,
directives: []
})
export class App implements AfterViewInit {
constructor(private ref:ChangeDetectorRef, private ngZone:NgZone, private renderer:Renderer) {

}

clickMe() {
alert("Yay, it works");
}

ngAfterViewInit() {
    let newButton = document.createElement("button");
    newButton.setAttribute("on-click","clickMe()");
    let textNode = document.createTextNode("This does not");
    newButton.appendChild(textNode);
    document.getElementById("insert-here").appendChild(newButton);

    // please make my button work:
    this.ref.detectChanges();
}

}

Answer 1

Zone 根本不关心 DOM。 Zone 仅修补 addEventListener()、setTimeout() 等异步 API，...然后仅检查模型的更改。

Angular假设它负责DOM。当模型更改时，DOM 由 Angular 更新，而不是相反。

无法使 Angular 创建组件或指令以匹配 HTML 或解析动态添加的 HTML 的绑定。 Angular 仅对静态添加到组件模板的 HTML 执行此操作。

DynamicaComponentLoader（已弃用）或 ViewContainerRef.createComponent() 是动态添加组件的方法。

您可以使用包装器元素，它可以轻松地以声明方式添加动态组件，如中所述（还包含新 ViewContainerRef.createComponent()

的 Plunker 示例

如何让 Angular2 RC1 知道更改 DOM

How let Angular2 RC1 know about changed DOM

dom

angularjs

zonejs

angular