在Angular 5中，如何从父组件访问动态添加的子组件? [英] In Angular 5, how to get access to dynamically added child components from parent component?

问题描述

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

I am developing an Ionic + Angular 5 project.

我需要动态加载一些组件.遵循Angular文档中的动态组件加载器示例，我能够成功加载组件并显示他们.

I need to dynamically load some components. Following the Dynamic Component Loader Example in the Angular documentation I am able to successfully load components and displayed them.

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

I have a need, however, to be able to loop through the loaded components.

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

I can easily maintain my own list of components in the parent as I create and destroy the child components but it seems to me that that's ugly and not the "Angular Way".

经过大量实验和研究，似乎我无法使用@ViewChildren来访问动态添加的组件，因为它们具有自己的视图. ViewChildren找不到动态组件

After much experimentation and research it seems that I cannot use @ViewChildren to access dynamically added components since they have their own views. ViewChildren not finding Dynamically components

这正确吗?

我能够使用viewContainerRef.get()遍历子视图并检索ViewRef.但是，似乎没有一种方法可以在给定ViewRef的情况下获得对该组件的引用?

I am able to use viewContainerRef.get() to iterate over the child views and retrieve ViewRefs. But there doesn't seem to be a way to get a reference to the component given a ViewRef?

我注意到ViewRef的'rootNodes'属性，但是该属性未记录在Angular文档中.查看参考但是，它已在EmbeddedViewRef文档嵌入式视图参考中进行了记录，但仍然没有似乎无法让我访问该组件.

I notice the 'rootNodes' property of the ViewRef however that property is not documented in the Angular docs View Ref However, it is documented in the EmbeddedViewRef docs Embedded View Ref but that still doesn't seem to give me access to the component.

所以问题是当我有一个可以动态添加子组件的父组件时，如何从父循环中遍历子组件(以便可以在子组件中调用我的方法之一)?我的怀疑是我缺少了一些愚蠢的简单事物，有一些基本的误解，或者我应该使用其他模式.

So the question is when I have a parent that dynamically adds child components how can I from the parent loop through the child components (so I can call one of my methods in the child)? My suspicion is that I am missing something stupid simple, have some fundamental misconception, or that there is a different pattern that I should be using.

我已经修改了Dynamic Component Loader示例，以突出显示我要执行的操作.修改后的Dynamic Component Loader

I've modified the Dynamic Component Loader example to highlight what I am trying to do.Modified Dynamic Component Loader

推荐答案

因此，我考虑了这一点，并采用了一种干净的方法(我认为)是在父组件上传递一个创建属性，例如parentContext并将数据或方法传递到此对象.

So, I thought about this and a clean way to do this (in my opinion), is to pass create a property on the parent component, such as parentContext and to pass the data or method into this object.

示例-在父组件中，您甚至可以将方法传递到子组件中，该方法将在父组件的上下文中运行.:

  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中，如何从父组件访问动态添加的子组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！