Дерево компонентов «Отец сыну» с гостевым компонентом

Question

В Angular 2 У меня есть иерархия компонентов. Однако в дереве мне нужно показать еще один элемент, который отделен от иерархии объектов. Он будет компонентом spinner. Как-то он не хочет появляться.

<parent> 
    <child> 
     <grandchild> 
      <spinner></spinner> 
     </grandchild> 
    <child> 
</parent> 

• parent включает в себя child в шаблоне,
• child включает в себя grandchild в шаблоне.
• grandchild не содержит spinner в шаблоне, но хочет его показать (для этого он использует ng-content). Или, может быть, в какой-то момент child захочет показать вместо этого счетчик.

Как заставить его работать? Всегда ли родитель должен указывать возможных детей? PLease дайте мне знать, что я делаю неправильно.

The example plunker

Answer 1

Если добавить <ng-content></ng-content> в шаблон компонента, то дочерние элементы отображаются вместо <ng-content></ng-content>.

Таким образом вы можете передать дочерние компоненты родителям.

@Component({ 
    selector: 'child' 
    template: `<grand-child><ng-content></ng-content></grand-child>` 
}) 

@Component({ 
    selector: 'grand-child' 
    template: `some content before <ng-content></ng-content>some content after` 
}) 

Затем вы можете использовать его как

<child><my-spinner></my-spinnger></child>