javascript - Angular 2 - 为什么动态组件的绑定(bind)被破坏？

Question

动态生成组件

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

Answer 1

那是因为您在 Angular 区域之外运行代码。

这应该适合你

constructor(private zone: NgZone, ...) {}

addTransportOrderComponent(jqContainer: any) {
  this.zone.run(() => {
     let componentFactory = this.componentFactoryResolver.resolveComponentFactory(TransportOrderComponent);
     let dynamicComponent = this.container.createComponent(componentFactory);
  })
}

Modified Plunker