angular - 使用多个组件时的角度嵌入

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

在父组件 html 中：

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

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

在包装层 ts 中：

@Input() parent: any;

你只需在 wrapper-layer html 中再次传递它：

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