通过包含插入(ng-content)插入的组件的Angular 2+调用函数 [英] Angular 2+ call function of component that was inserted with transclusion (ng-content)

问题描述

我有一个模态窗口组件，我通过< ng-content></ng-content> 插入具有包含性的模态内容组件.我需要从模态组件中调用模态内容中的函数.在这种情况下，将重置模式内容的状态.如何获得对模态内容的引用，以便可以调用其功能之一?还是有更好的方式与我的孩子内容组件进行交流?

I have a modal window component, and I'm inserting the modal content component with transclusion via <ng-content></ng-content>. I need to call a function in my modal content from the modal component. In this case it's to reset the state of the modal content. How can I get a reference to my modal content so that I can call one of it's functions? Or is there a better way to communicate with my child content component?

更新:我要包含不同的组件，因此我确实需要一种方法来获取引用，而又不知道所包含内容的类型.

UPDATE: I am transcluding different components, so I do need a way to get the reference without knowing what type the transcluded content is.

我尝试了一些发现的变通办法，但没有任何运气.如果有人可以提供a客，那将会有很大帮助.

I've tried several workarounds that I've found, and I'm not having any luck. If someone can provide a plunkr, that would help out a lot.

推荐答案

Chrispy的评论正确."...您可以将#templateRef添加到包含该元素的已嵌入组件(即不在ng-content上)，然后可以将其用作选择器."

Chrispy's comment is correct. "...you can add the #templateRef to the transcluded component where it is being included (i.e. not on the ng-content), then you can use that as the selector instead."

所以我有我的父(模态)组件:

So I have in my parent (modal) component:

@ContentChild('transcludedContent') private transcludedContent: ModalContent;

然后将模态输入到哪里:

Then where the modal is brought in I have:

<modal>
  <transcluded-component #transcludedContent>
  </transcluded-component>
</modal>

这篇关于通过包含插入(ng-content)插入的组件的Angular 2+调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！