不过，实际上这是从这里衍生出来的，但使用案例要简单得多。关于如何让Angular2知道在外部添加了包含Angular指令的DOM元素。在这种情况下，我添加了一个新的单击按钮，其单击事件从未绑定。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();
}
}
Zone根本不关心DOM。区域仅修补异步API（如addEventListener()，，setTimeout()...），然后仅检查模型是否有更改。
Angular假定它负责DOM。更改模型时，Angular会更新DOM，而不是相反。
无法使Angular创建用于匹配HTML的组件或指令或解析动态添加的HTML的绑定。Angular仅对静态添加到组件模板的HTML执行此操作。
DynamicaComponentLoader（已弃用）还是ViewContainerRef.createComponent()动态添加组件的方法。
您可以使用wrapper元素，这样可以轻松地声明性地添加动态组件，如Angular 2动态选项卡中所述，并带有用户单击的选定组件（还包含新组件的Plunker示例）ViewContainerRef.createComponent()
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句