动态生成组件
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(TransportOrderComponent);
let dynamicComponent = this.container.createComponent(componentFactory);
动态组件中的属性绑定(bind)不起作用。 (例如 ngIf、按钮点击……)
组件 html:
<button (click)="show = !show">toggle: {{show ? 'hide' : 'show'}}</button>
<br>
<div *ngIf="show"> Text to show</div>
组件 typescript :
...
export class TransportOrderComponent {
show: boolean = true;
}
作为静态组件一切正常。如果我添加动态组件并单击静态组件按钮,动态组件的内容将更改一次
这是一个plunkr
最佳答案
那是因为您在 Angular 区域之外运行代码。
这应该适合你
constructor(private zone: NgZone, ...) {}
addTransportOrderComponent(jqContainer: any) {
this.zone.run(() => {
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(TransportOrderComponent);
let dynamicComponent = this.container.createComponent(componentFactory);
})
}
关于javascript - Angular 2 - 为什么动态组件的绑定(bind)被破坏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43653952/