Angular 6在父组件中显示子代的模板

问题描述:

对于Angular 6应用程序,我想清理代码并归纳一些部分.

For an Angular 6 application I want to clean up my code and generalize some parts.

在我的应用程序的详细信息页面上,有两个主要部分的摘要和一些更详细的内容.摘要分为三张mat卡.而详细的部分是整个页面整个宽度上的较大的卡片.摘要部分对于每种类型的详细信息页面大致相同.每种类型的详细页面都不同.

On a detail page in my application is have two main sections a summary and some more detailed stuff. The summary is split up in three mat-cards. And the detailed part is a larger mat-card over the whole width of the page. The summary part is for each type of detail page more or less the same. The detailed page is for each type different.

我想创建一个概述组件,该组件处理所有逻辑(HTTP调用等).对于详细的部分,我想为每种类型创建一个自定义组件,这些组件将处理可视化(不同的图表,表格等).到现在为止都没什么大问题.

I want to create an overview component, this component handles all the logic (HTTP-calls, etc.). For the detailed section i want to create a custom component for each type, these components will handle the visualization (different charts, tables, etc.). Till now no big problem.

我研究的问题是,在一张详细的席位卡中,有针对每种类型的自定义可视化.所以现在我的问题是,是否有可能以某种方式将内容从子组件显示到父组件中.我附上了图片来阐明我的情况.

The problem I stubbled upon is that in one of the detail mat-cards there is custom visualisation specific for each type. So now my question, is it possible to somehow show content from a child component into the parent. I attached an image to clarify my situation.

看看 ng-content :在您的父级中,您将包含 ng-content 块,以及您的子组件将内容放入其中的选择器.

In your parent, you would include ng-content blocks with selectors that your child component would place content into.