通过 ComponentFactoryResolver 创建组件时更改检测不起作用
Change detection not working when creating a component via ComponentFactoryResolver
我有一个组件,正在使用 ComponentFactoryResolver 创建另一个组件。它似乎工作正常,我可以通过@Input 访问数据。问题是 ngOnChanges 在组件启动或数据更改时永远不会被调用。但是,如果我以正常方式创建组件,它确实会触发,它的选择器在 HTML 中。这不是动态的,所以我只剩下 ComponentFactoryResolver。这是正常行为吗?
我的父组件有它的输入:
@ViewChild( MyDirective ) myHost: MyDirective;
然后它创建子组件,其输入是这样的:
@Input('key') key: String;
@Input('index') index: number;
我正在创建这样的组件:
let item = new Item(ItemDropdownComponent, this.key, 0);
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(item.component);
let viewContainerRef = this.myHost.viewContainerRef;
viewContainerRef.clear();
let componentRef = viewContainerRef.createComponent(componentFactory);
(<ItemInterfaceComponent>componentRef.instance).key = item.key;
(<ItemInterfaceComponent>componentRef.instance).index = item.index;
这是预期的行为。
您可以显式调用更改检测
componentRef.changeDetectorRef.detectChanges();
如果您 运行 手动更改检测,请注意它将 运行 用于组件和所有 children,表示完整分支。
所以你需要考虑在创建新的时分离其他children。
我有一个组件,正在使用 ComponentFactoryResolver 创建另一个组件。它似乎工作正常,我可以通过@Input 访问数据。问题是 ngOnChanges 在组件启动或数据更改时永远不会被调用。但是,如果我以正常方式创建组件,它确实会触发,它的选择器在 HTML 中。这不是动态的,所以我只剩下 ComponentFactoryResolver。这是正常行为吗?
我的父组件有它的输入:
@ViewChild( MyDirective ) myHost: MyDirective;
然后它创建子组件,其输入是这样的:
@Input('key') key: String;
@Input('index') index: number;
我正在创建这样的组件:
let item = new Item(ItemDropdownComponent, this.key, 0);
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(item.component);
let viewContainerRef = this.myHost.viewContainerRef;
viewContainerRef.clear();
let componentRef = viewContainerRef.createComponent(componentFactory);
(<ItemInterfaceComponent>componentRef.instance).key = item.key;
(<ItemInterfaceComponent>componentRef.instance).index = item.index;
这是预期的行为。 您可以显式调用更改检测
componentRef.changeDetectorRef.detectChanges();
如果您 运行 手动更改检测,请注意它将 运行 用于组件和所有 children,表示完整分支。 所以你需要考虑在创建新的时分离其他children。