javascript - 在 Angular 5 中，如何从父组件访问动态添加的子组件？

Question

我正在开发一个 Ionic + Angular 5 项目。

我需要动态加载一些组件。关注 Dynamic Component Loader Example在 Angular 文档中，我能够成功加载组件并显示它们。

但是，我需要能够遍历加载的组件。

在创建和销毁子组件时，我可以轻松地在父组件中维护自己的组件列表，但在我看来，这很丑陋，而不是“Angular Way”。

经过大量的实验和研究，我似乎无法使用@ViewChildren 访问动态添加的组件，因为它们有自己的 View 。 ViewChildren not finding Dynamically components

这个对吗？

我可以使用 viewContainerRef.get() 来遍历 subview 并检索 ViewRefs。但是似乎没有办法在给定 ViewRef 的情况下获取对组件的引用？

我注意到 ViewRef 的 'rootNodes' 属性，但是该属性没有记录在 Angular 文档 View Ref 中。但是，它记录在 EmbeddedViewRef 文档 Embedded View Ref但这似乎仍然无法让我访问该组件。

所以问题是当我有一个动态添加子组件的父级时，我如何从父级循环通过子组件(这样我就可以在子级中调用我的方法之一)？我的怀疑是我错过了一些愚蠢的简单的东西，有一些基本的误解，或者我应该使用不同的模式。

我修改了 Dynamic Component Loader 示例以突出显示我正在尝试做的事情。 Modified Dynamic Component Loader

Answer 1

所以，我想到了这一点，一个干净的方法(在我看来)是在父组件上创建一个属性，例如 parentContext并将数据或方法传递给这个对象。

示例 - 在父组件中，您甚至可以将一个方法传递给您的子组件，它将在父组件的上下文中运行。 :

  gotoDetail(hero: Hero): void {
    this.entry.clear();
    const factory = this.resolver.resolveComponentFactory(DynamicModalChildComponent);
    this.dynamicModalComponentRef = this.entry.createComponent(factory);
    this.dynamicModalComponentRef.instance.hero = hero;
    // Pass parent context to child in order to close modal hierarchically (parent/child component relationship).
    // This approach is less verbose and makes it easier to unit test than a service in my opinion.
    this.dynamicModalComponentRef.instance.parentContext = () => this.destroyComponent();
}