Question

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

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

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

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

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

这正确吗？

我能够使用viewContainerRef.get（）遍历子视图并检索ViewRef。但是在给定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();
}

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

1 个答案: