5

总结我想要完成的事情

  • 将组件动态添加到ViewContainerRef（完成）
  • 用属性初始化这些动态组件（完成）
  • 访问动态创建的 Component 实例，以便我可以根据实际情况做出决定。

问题

  • 动态添加组件时，它们被添加到ViewContainerRef
  • ViewContainerRef提供方法，例如get(index)return ViewRef。
  • ViewRef似乎与Component实例没有任何关系，这使得获取所需数据成为一项挑战

这是一个 Stackblitz 链接，其工作代码如下所示（用于动态创建组件）

首先使用appComponent创建一些组件ComponentFactoryResolver，然后将它们添加到ViewChild模板中定义的内容中。每个都使用我们在创建后尝试引用DynamicComponent的属性值进行初始化id

@Component({
  selector: "my-app",
  template: `
    <h3>Retrieving Component Reference for Dyamic Compnents</h3>
    <button (click)="getCompRef()">Get References</button>
    <div>
      <ng-container #childCont></ng-container>
    </div>
    <div>
      <small>List out the Ids from the dynamic components</small> <br />
      {{ createdItemIds | json }}
    </div>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  @ViewChild("childCont", { read: ViewContainerRef })
  childCont: ViewContainerRef;

  createdItemIds: string[] = [];

  itemLimit = 5;

  constructor(
    private fr: ComponentFactoryResolver,
    private cdr: ChangeDetectorRef
  ) {}

  ngAfterViewInit(): void {
    for (let i = 0; i < this.itemLimit; i++) {
      const factory = this.fr.resolveComponentFactory(DynamicComponent);
      const compRef = this.childCont.createComponent(factory, i);
      // Set the id of the instance so that we can use it later
      compRef.instance.id = i + 1;
      this.cdr.detectChanges();
    }
  }
  ...
}

添加的DynamicComponent内容相当简单。为简化起见，它只包含id我们试图获得的单个属性

@Component({
  selector: "dynamic-component",
  template: `
    <div>Dynamic Component: {{ id }}</div>
  `,
  styles: [``]
  ]
})
export class DynamicComponent {
  id: number;
}

到目前为止一切都很好。

  • 组件是动态创建的
  • 组件实例使用 ID 进行初始化，我们可以通过它在 UI 中显示的 fat 看到

问题在于尝试从 DynamicallyCreated 组件中检索 ID 属性。

在 中AppComponent，当用户单击按钮时，该getCompRef()方法被调用并循环遍历childCont (ViewContainerRef)

getCompRef(): void {
  for (let i = 0; i < this.itemLimit; i++) {
    const viewRef = this.childCont.get(i);
    // How do I get at the instance of the view  in order to obtain id?
    // the view Ref doesn't provide access to the instance
    // console.log(viewRef);
  }
}

但是ViewRef返回的 fromViewContainerRef.get()是一个子类，ChangeDetectoreRef并且不包含对相关实例的任何引用。

在对这个问题进行研究时，它尝试沿着使用的路径ViewChildren来获取正在创建的列表组件，但这并没有奏效，因为诸如以下问题

  • https://github.com/angular/angular/issues/8785
  • 或示例假定在模板中使用的指令用于ViewChildren selector已在模板中预定义的组件
  • 我看到很多关于一些人希望在拥有 ViewRef 时获得 ViewRef 的问题Component.instance，但这在这种情况下没有帮助。

最后我的问题是，

  • 有没有一种简单的方法可以从ViewRef我缺少的 Component 实例中获取

任何帮助表示赞赏。

谢谢你。

4

0 回答 0