Question

我正在向表单中动态添加行，并希望每个新行都具有唯一的ID号。

我具有以下代码来添加新组件（代表新行），但是我发现component.instance仅包含新创建的组件的“常规”属性，而不包含用{{装饰的属性1}}。是否有任何方法可以动态写入/修改@Input()属性？当动态创建一个组件时，自然会假设必须有一种直接的方法以某种方式提供@Input（）值！

@Input()

这是动态创建的组件：

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(thisType);
const component = this.subEnrollForm.container.createComponent(componentFactory);
component.instance.rowData.push(newRow); //rowData is a property in the
                                       dynamically-created component and 
                                       is decorated with @Input()

我看到一个具有以下答案的旧帖子，但希望随后添加了新功能来解决此问题：

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

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

您也可以使用

让componentRef = entryPoint.createComponent（componentFactory）;   componentRef.instance.someProp ='someValue';   componentRef.instance.someObservableOrEventEmitter.subscribe（data =>   this.prop = data）;

后一种解决方案对我不起作用，也没有建议将组件转换为类型export class SubEnrollFormRowComponent implements OnInit, DoCheck, OnChanges, AfterContentInit, AfterViewInit { @Input() rowData; objKeys: Array<any> = []; subKeys: Array<any> = [];。我对上述<any>方法的解释是，我需要为孙子孙子创建一个Observable进行订阅，以监视其祖父母何时尝试更新孙子孙的@Input（）属性，但是这种方法在我看来被大量不必要的编码和开销所掩盖，以达到应该非常简单明了的目的（除非我丢失了某些东西，这很有可能！）。如果有人可以通过相对简单的方法来初始化/动态修改以@Input装饰的孙子组件属性，请在此先感谢！

Answer 1

用@Input装饰的属性仍然是类属性，并且可以像其他任何属性一样访问。

我创建了一个工作示例： https://stackblitz.com/edit/angular-6-template-yih3sx?file=src%2Fapp%2Fapp.component.ts

有没有办法访问动态创建的组件中的@Input变量？

1 个答案: