angular - 如何在 Angular 中将组件传递给 ng-content？

Question

我试图通过在父组件的内容区域内引用它来找到一种将组件嵌套在另一个组件中的简单方法。这将是父母：

@Component({
    selector: 'app-foo',
    template: `
    <div>
        <p>Some content around the nested component</p>
        <ng-content></ng-content>
        <p>And some more content below the nested component</p>
    </div>
  `
})
export class Foo {
}

然后我想像这样使用它：

<app-foo>
    <app-bar></app-bar>
</app-foo>

我认为在自定义组件的内容区域内只接受字符串，所以这不起作用。但这似乎是一个非常通用的用例，我找不到完全做到这一点的示例，而不会使它变得非常复杂。我不是高级 Angular 用户，所以我喜欢保持简单。有没有我遗漏的文件，或者有什么建议可以解决这个问题？