使用多个组件时角截止性

Question

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

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

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

在发出期间，我如何避免将传递的组件显示在<wrapper-layer>中。

Answer 1

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

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

Answer 2

如果要将一个组件传递给孩子，则可以使用类似的东西：

在parent-component html中：

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

(这将把当前组件传递给其孩子。或者，如果您想找到自定义组件，仍然可以使用ViewChild选择器(

(

在包装纸中TS：

@Input() parent: any;

，您只需在包装纸html中再次通过它：

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