使用多个组件时的角度嵌入答案

【问题标题】：Angular transclusion when using multiple components使用多个组件时的角度嵌入
【发布时间】：2018-03-26 02:16:15
【问题描述】：

我具有以下层次结构的三个组件：

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

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

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

【问题讨论】：

【解决方案1】：

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

在<parent-component>：放置你要传递的组件。

在<wrapper-layer>：使用下面的sn-p：

<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>组件中。

【讨论】：

【解决方案2】：

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

在父组件html中：

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

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

在包装层 ts:

@Input() parent: any;

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

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

【讨论】：