Угловая трансклюзия при использовании нескольких компонентов

Question

У меня есть три компонента следующей иерархии:

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

Я запутался в том, как передать компонент из <parent-component> в <inner-most> компонент через <wrapper-layer>,

Во время включения, как избежать того, чтобы переданный компонент отображался в <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

Если вы хотите передать компонент его дочерним элементам, вы можете использовать что-то вроде этого:

в html родительского компонента:

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

(это передаст текущий компонент его дочерним элементам. Или, если вы хотите найти пользовательский компонент, все равно можете использовать селектор ViewChild)

в оберточном слое тс:

@Input() parent: any;

и вы просто передаете его снова в html-слое оболочки:

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