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

Question

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

我有以下代码来添加一个新组件(代表一个新行)，但我发现component.instance仅包含新创建组件的“正常”属性，而不包含用 @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()

这是动态创建的组件:

export class SubEnrollFormRowComponent implements OnInit, DoCheck, OnChanges, AfterContentInit, AfterViewInit {
 @Input() rowData; 
  objKeys: Array<any> = [];
  subKeys: Array<any> = [];

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

No, Angular2 bindings only work with components and directives statically added to the template of a component.

For all other situations use shared services like explained in https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

You can also use

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

后一个解决方案对我不起作用，将组件强制转换为类型 <any> 的另一个建议也不起作用。 。我对services的解读上面提到的方法是，我需要为孙子创建一个 Observable 来订阅，以监视祖 parent 何时尝试更新孙子的 @Input() 属性，但在我看来，这种方法是巨大的杀伤力，有很多不必要的编码和开销来实现应该非常简单和直接的东西(除非我遗漏了一些东西，这很可能!)。如果有人有一种相对简单的方法来初始化/动态修改用 @Input 装饰的孙子组件属性，请提前非常感谢!

Answer 1

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

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