访问父模板中以编程方式创建的子组件 - Angular 4答案

【问题标题】：Access the programatically created child components in parent template - Angular 4访问父模板中以编程方式创建的子组件 - Angular 4
【发布时间】：2018-01-17 18:12:33
【问题描述】：

我正在从父组件中添加/删除动态创建的子组件。这是我的子组件：

<div class="form-container">
<div class="form-item">
    <label class="edit-label" for="name">Name</label>
    <input type="text" class="edit-input" name="name" placeholder="John Doe" [formControl]="name" required>
</div>
<div class="form-item">
    <label class="edit-label" for="email">Email</label>
    <input type="email" class="edit-input" name="email" placeholder="johndoe@gmail.com" [formControl]="email" required>
</div>
<div class="form-item">
    <label class="edit-label" for="contact">Mobile Number</label>
    <input type="text" class="edit-input" name="contact" placeholder="03xx-xxxxxxx" [formControl]="contact" required>
</div>
<div class="form-item" *ngIf = "showRemove != false">
    <button type="button" class="btn btn-default btn-danger"
    (click)="removeObject()" > Remove</button>
</div>

它在父组件中被这样使用：

<div #newUserParent></div>

这是父 ts 文件：

export class AddUserComponent implements OnInit {

 selectedMode = "existing";
 @ViewChild('newUserParent', { read: ViewContainerRef }) container:     ViewContainerRef; 

  users: IMultiSelectOption[];
  usersModel: number[];
  usersSettings: IMultiSelectSettings = {
  enableSearch: true
  }

  constructor(public activeModal: NgbActiveModal, 
          private _cfr: ComponentFactoryResolver) {}

  addComponent(showRemove = true) {
   console.log('adding component');
   //check and resolve the component
   var comp = this._cfr.resolveComponentFactory(NewUserComponent);
   //create component inside container
   var newUserComponent = this.container.createComponent(comp);
   newUserComponent.instance._ref = newUserComponent;
   newUserComponent.instance.showRemove = showRemove;
 }

 addUser() {
   console.log('add user');
   //dynamically go through the components and get the 
 }

 isValid() {
   var isValid = true;
   console.log(this.container.length); //returns the no. of components added
   //traverse through the components and see if they are valid or not
   for(let index = 0; index<this.container.length; index++) {

    // I want to basically go through the components and call their public functions and also access their public properties
    let component = this.container.get(index); console.log(component);
    let instance = component['_view']['nodes'][1];
    console.log(instance);
    // isValid = component.instance.isValid();
   }
   return isValid;
 }

}

问题陈述 我在这里面临的问题是我知道如何添加组件以及每个组件如何具有与之关联的组件工厂以及如何在 ViewContainerReference 中创建其视图。我不明白的是我们如何遍历 ViewContainerReference 并取回组件并调用它们的函数。我可以通过上面编写的代码访问属性，但这似乎是错误的。必须有更好的方法。我也经历过 ViewContainerReference 的类，不明白哪个函数可以帮助我

【问题讨论】：

@hrdkisback 我不明白这个链接与我的问题有何相似之处。就我而言，我在父模板中动态创建了组件，我需要一种方法来遍历这些组件并查看用户是否添加了正确的数据等
@alina，尝试this.container.get(index).context 获取组件实例的访问权限或存储在某处this.container.createComponent(comp).instance
@AngularInDepth.com 谢谢你的第二种方法对我有用:)
@alina 抱歉，实际上这是错误的链接我想给你这个链接stackoverflow.com/questions/39678963/…
@hrdkisback 没关系。我能够解决我的问题，但是，我仍然会调查这个:)

标签： angular typescript components

【解决方案1】：

我最终使用了@AngularInDepth 的方法。第一个对我不起作用，因为我找不到上下文，但第二个对我有用。我试图做同样的事情，但是我没有在数组中添加组件的“实例”，而是将整个 (this.container.createComponent(comp)) 推送到数组中，这给我带来了问题。

【讨论】：