如何在另一个角度为10的组件内部渲染组件

Question

我遇到一种情况，我必须在另一个组件内渲染一个组件，就像在另一个div内的div一样。假设有两个组件HStack和Button，我希望能够使用上述两个组件在任何其他组件中执行类似的操作：

<HStack>
  <Button>Similar kind of nesting here!</Button>
</HStack>

我该如何实现？ 任何帮助将不胜感激！

Answer 1

您要查找的是 content projection。

示例代码：

import { Component } from '@angular/core';

@Component({
  selector: 'HStack',
  template: `
  <ng-content></ng-content>
`
})
export class HStack {}

使用方法：

<HStack>
  <Button>Similar kind of nesting here!</Button>
</HStack>