Дерево компонентов от отца к сыну с гостевым компонентом

Question

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

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

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

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

Пример плунжера

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>