Question

是否有一种方法可用于在动态创建的Angular 2组件上定义@Input属性？

我使用ComponentFactoryResolver在容器组件中创建组件。例如：

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentName);

let componentRef = entryPoint.createComponent(componentFactory);

where＆＃34; entryPoint＆＃34;在组件HTML中是这样的：

<div #entryPoint></div>

在我的容器组件中定义：

@ViewChild('entryPoint', { read: ViewContainerRef } entryPoint: ViewContainerRef;

这很好用，但我找不到让@Input属性在新创建的组件上工作的方法。我知道您可以在组件类上明确设置公共属性，但这似乎不适用于ng-reflect。在做出这个改变之前，我选择了＃34;物业装饰着＆＃34; @Input（）＆＃34;这导致Angular将以下内容添加到DOM：

<my-component ng-reflected-selected="true"></my-component>

有了这个，我就可以动态更新标记来切换CSS类：

<div class="header" [class.active-header]="selected === true"></div>

根据一些搜索，我能够找到一种方法来制作＆＃34; @输出＆＃34;按预期工作，但我还没有为@Input找到任何东西。

如果有其他情况有用，请告诉我，我很乐意添加它。

Answer 1

不，Angular2绑定仅适用于静态添加到组件模板的组件和指令。

对于所有其他情况，请使用https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

中说明的共享服务

您也可以使用

let componentRef = entryPoint.createComponent(componentFactory);
componentRef.instance.someProp = 'someValue';
componentRef.instance.someObservableOrEventEmitter.subscribe(data => this.prop = data);

Answer 2

The Günter Zöchbauer's answer 是正确的。但是，如果您和我一样，在组件模板中呈现 @Input 数据时遇到问题，您应该试试这个：

在 ngAfterViewInit 中运行您的组件创建代码。
添加 componentRef.instance.ngOnInit() 作为最后一行。
在动态创建的组件的 ngOnInit 内运行 detectChanges 的 ChangeDetectorRef 方法。

如何将@Input用于使用ComponentFactoryResolver创建的组件？

2 个答案: