Vue <slot/> 的 Angular 等价物是什么？答案

【问题标题】：What's the Angular equivalent of Vue <slot/>?Vue <slot/> 的 Angular 等价物是什么？
【发布时间】：2019-12-23 12:06:27
【问题描述】：

例子：

父组件：

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

子组件：

<div> 
  World 
</div>

应用组件：

<Parent> 
  <Child/> 
</Parent>

输出：Hello World！

【问题讨论】：

【解决方案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>

【讨论】：

根据this article，我必须使用<ng-content select=".child"></ng-content>（“选择”而不是“选择器”）来使其工作。
ng-content 和 Vue <slot/> 的主要区别在于 Angular 不能使用父插槽内容作为动态模板；但是，使用 Vue <slot/> 您可以绑定子组件可以使用的父插槽内容中的值。我已经尝试了几个月在 Angular 中执行此操作，因此我可以拥有一个通用的 data-table 组件并根据需要自定义行内容。似乎ng-content/ng-template/ng-container 无法做到这一点。我刚刚在不到一个小时的时间内使用名为<slot/> 的 Vue 完成了这项工作，效果很好。要是我能让管理层接受切换到 Vue 就好了……

【解决方案2】：

内容投影

在角度上称为“内容投影”，分为三种类型

1) 单槽内容投影 使用这种类型的内容投影，组件接受来自单一来源。

内容投影很酷吗？

2) 多槽内容投影 内容投影很酷吗？

让我们了解一下内容投影！

在这种情况下，组件接受来自多个来源的内容。

3) 条件内容投影 使用条件内容投影的组件仅渲染内容满足特定条件时。

【讨论】：

【解决方案3】：

eww，vue2 用户在这里学习角度。

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

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

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

【讨论】：