1

这实际上是从这里衍生出来的，不过用例要简单得多。它是关于如何让 Angular2 知道有外部添加的包含 Angular 指令的 DOM 元素。在这种情况下，我添加了一个新的单击按钮，其单击事件永远不会被绑定。我认为 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();
}

}
4

1 回答 1

1

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

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

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

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

您可以使用包装器元素，它可以轻松地以声明方式添加动态组件，如Angular 2 动态选项卡中的说明，用户单击选择的组件（还包含新的 Plunker 示例ViewContainerRef.createComponent()

于 2016-06-01T07:18:41.307 回答