我有以下嵌套组件结构。
<app-root>
<app-comp-1>
<app-comp-2>
</app-comp-2>
</app-comp-1>
<app-root>
我想将任何内容嵌入到最后一个子项 (app-comp-2) 中。所以,我需要这样的东西。
<app-comp-1>
<app-comp-2>
<ng-content></ng-content>
</app-comp-2>
</app-comp-1>
但是在 app-root 组件中只有 app-comp-1 组件可用。所以,这是我必须嵌入我的内容的地方。
<app-root>
<app-comp-1>
<content-I-want-to-transclude></content-I-want-to-transclude>
</app-comp-1>
</app-root>
---------------------------
<app-comp-1>
<ng-content></ng-content>
<app-comp-2>
...
</app-comp-2>
</app-comp-1>
所以我需要一个解决方案来获取已嵌入到第一个组件中的内容并将其传递给第二个组件。
最佳答案
This Github issue使用 ngProjectAs
属性为这个问题提供了一个很好的解决方案。
在有 2 层内容投影的情况下,第一层使用带有 ngProjectAs
属性的 ng-content
元素,以及下一个选择器。
第二层使用另一个ng-content
,并选择第一层的ngProjectAs
属性的值:
一级(父组件):
<ng-content select="my-component" ngProjectAs="arbitrary-selector"></ng-content>
第 2 级(嵌套子组件):
<ng-content select="arbitrary-selector"></ng-content>
用法:
<my-app>
<my-component>My Projected Content</my-component>
</my-app>
结果 DOM:
<my-app>
<my-component>
<nested-component>My Projected Content</nested-component>
</my-component>
</my-app>
关于angular - 在嵌套组件中链接包含,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41247414/