带有来宾组件的父子组件树

Question

在角度2中，我有一个组件的层次结构。然而，在树中，我需要显示另一个与对象层次结构解耦的元素。它将是一个旋转部件。不知何故它不想出现。

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

• parent在模板中包含了child，
• child在模板中包括grandchild。
• grandchild没有在模板中包括spinner，但是想要显示它(它使用ng-content )。或者，在某个时候，child会想要显示旋转器而不是。

我怎么才能让它起作用？父母总是必须指定可能的孩子吗？PLease让我知道我做错了什么。

示例柱塞

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>