Angular 动态组件属性绑定(bind)

Question

我在 Angular 6 中使用 componentFactoryResolver 创建了一个动态组件，我需要每 3 秒更新一次它的一个属性。

const componentFactory = this.cfr.resolveComponentFactory(componentType);
const component: ComponentRef<any> = vcr.createComponent(componentFactory);

component.instance.property = this.newData;

    setInterval(() => {
      this.loadNewData().then((data) => {
        this.newData = data;
      });
    }, 3000);

该属性未更新。我发现动态生成的组件不支持属性绑定(bind)。那么，如何使用新数据更新属性呢？有什么解决方法吗？

Answer 1

有点晚了，但我发现你的问题很有趣......:)

我做了一个 Stackblitz 示例:https://stackblitz.com/edit/angular-3gvrrz

由于我不能完全确定您的要求，所以我使用 @Input() 并在共享服务中使用 BehaviorSubject 制作了示例。

export class AppComponent implements OnInit {
  name = 'Angular';
  @ViewChild(ContainerDirective, { static: true }) container: ContainerDirective;
  DATA = ['Angular', 'Material', 'Nativescript', 'Ionic'];
  index = 0;

  constructor(private componentFactoryResolver: ComponentFactoryResolver,
    private commonService: CommonService) {}

  ngOnInit() {
    const viewContainerRef = this.container.viewContainerRef;
    viewContainerRef.clear();
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(HelloComponent);
    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<HelloComponent>componentRef.instance).name = 'Starting...';

    setInterval(() => {
      if (this.index > this.DATA.length - 1) {
        this.index = 0;
      }
      const nextName: string = this.DATA[this.index++];
      (<HelloComponent>componentRef.instance).name = nextName;
      this.commonService.setName(nextName)
    }, 3000);
  }
}