Vue <slot />的Angular等效值是多少？

Question

例：

父组件：

<div> 
  Hello <slot/>!
</div>

子组件：

<div> 
  World 
</div>

应用程序组件：

<Parent> 
  <Child/> 
</Parent>

输出：Hello World！

Answer 1

我们在Angular中有类似的东西。

该指令<ng-content>用于将外部内容投影到当前组件中，您可以使用选择器通过CSS样式查询来投影特定内容。

app-example.html：

<div>
   <ng-content></ng-content>
</div>
<div>
   <ng-content selector=".child"></ng-content>
</div>

app-component.html

<app-example>
   <span class="child">World</span>
   Hello
</app-example>

呈现此输出：

<app-example>
  <div>Hello</div>
  <div><span class="child">World</span></div>
</app-example>