Vue <slot/> 的 Angular 等价物是啥？

Posted 2023-02-23

【中文标题】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) 条件内容投影 使用条件内容投影的组件仅渲染内容 满足特定条件时。

来源： https://angular.io/guide/content-projection

【参考方案3】：

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

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

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

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

【讨论】：

您指定了一个 CSS 选择器，因此您可以使用 id 而不是我猜的类 [注意：我很快就会进入主题，所以我不是 100% 确定，但看起来逻辑]

我想这可能会奏效。除非您的组件在 for 循环中使用。您将必须管理 id，以便它们是唯一的。也许 data- 属性在这种情况下会起作用？