Angular 使用多个组件时的包含

Question

我有以下层次结构的三个组成部分：

<parent-component>
 <wrapper-layer>
   <inner-most>
   </inner-most>
 </wrapper-layer>
</parent-component>

我对如何通过 <wrapper-layer> 将组件从 <parent-component> 传递到 <inner-most> 感到困惑。

在嵌入过程中如何避免传递的组件显示在<wrapper-layer>。

Answer 1

如果你想将一个组件传递给它的children，那么你可以使用这样的东西：

在 parent-component html:

<wrapper-layer [parent]="this">...

（这会将当前组件传递给它的 children。或者，如果您想查找自定义组件，仍然可以使用 ViewChild 选择器）

在 wrapper-layer 中：

@Input() parent: any;

然后你再次传递它，在 wrapper-layer html:

<inner-most [parent]="parent">...

Answer 2

因为没有答案。我是这样完成的：

In <parent-component>: 放置你想传递的组件。

在 <wrapper-layer> 中：使用以下代码段：

<ng-container ngProjectAs="component-to-pass">
            <ng-content select="component-to-pass"></ng-content>
</ng-container>

在 <inner-most> 中：<ng-content select="component-to-pass"></ng-content>。

通过这种方式，传递的组件不会在中间层呈现，而是传递到 <inner-most> 组件。

Angular transclusion when using multiple components