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>

Answer 2

eww，vue2 用户在这里学习 angular。

真的不喜欢使用 class 来识别不同的 ng-content。

名称属性会将意图与样式分开。

也许未来的 Angular 版本可以添加名称 attr 和 cooy vue 的命名槽功能，尤其是作用域槽和父内容。