如何在另一個組件中渲染一個組件 angular 10

Question

我有，我有渲染的另一個組件內的組件就像一個情況div另一個里面div 。 假設有兩個組件HStack & Button ，我希望能夠使用上述兩個組件從任何其他組件執行類似的操作：

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

我怎樣才能做到這一點？ 任何幫助將不勝感激！

Answer 1

您正在尋找的是內容投影。

示例代碼：

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>