Question

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

注意：我已经添加了NgZone和ChangeDetectorRef来玩。对我来说都没有用。

以下是plunkr完整示例的链接：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()是动态添加组件的方法。

您可以使用包装元素，以便以声明方式添加动态组件，如Angular 2 dynamic tabs with user-click chosen components中所述（还包含新ViewContainerRef.createComponent()

的Plunker示例

如何让Angular2 RC1了解更改的DOM

1 个答案: