是否有相当于 React Fragments 的 Angular 2+？答案

【问题标题】：Is there an Angular 2+ Equivalent to React Fragments?是否有相当于 React Fragments 的 Angular 2+？
【发布时间】：2019-02-08 20:05:51
【问题描述】：

我想提取组件的一部分，而不是在物理 DOM 中实际创建额外的“包装器”元素，因为它破坏了我的 CSS。

示例：我注意到我的 HTML 模板中有一个部分如下所示：

<div>Foo</div>
<div>Bar</div>

我想将这两个标签提取到一个名为<MyComponent> 的组件中，并在其他地方重用它。但是，当我实际上不希望将名为 <MyComponent> 的父组件添加到 DOM 时。目前我看到的渲染是

<MyComponent>
  <div>Foo</div>
  <div>Bar</div>
</MyComponent>

React 让我使用Fragment 组件的概念完美地解决了这个问题，它可以让您在不向 DOM 添加额外节点的情况下对元素进行分组。

我想知道是否有一部分我缺少的 Angular 组件 API 可以让我这样做，或者我应该考虑一种根本不同的方式来重用 Angular 组件中的代码。

这个应用程序在 Angular 6 中，我来自 React 16+ 的背景。

使用示例代码片段编辑：我希望在没有将 hello 元素添加到 DOM 的情况下进行渲染 - 我只希望出现 hello 组件内的 <p> 标记

https://stackblitz.com/edit/angular-kaxm27

【问题讨论】：

Angular 和 React 在某些想法上有很大的不同，您能否发布一个您需要的示例。您可以使用不同的解决方案，但它们取决于实际用例
已编辑以添加功能代码示例
stackoverflow.com/a/46134604/2138752

标签： javascript angular reactjs frontend angular6

【解决方案1】：

将ng-container 与ngFor (for) 循环和表格标记一起使用。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
   <ng-container *ngFor="let item of items">
    <tr>
      <td>{{ item.id }}</td>
      <td>{{ item.title }}</td>
    </tr>
   <ng-container>
  <tbody>
</table>

【讨论】：

【解决方案2】：

你可以这样做：

@Component({
  // tslint:disable-next-line: component-selector
  selector: '[my-fragment-component]',
  ...
})
export class MyFragmentComponent {}

...

<div my-fragment-component>
</div>

它会起作用，不知道任何可能的副作用......

【讨论】：

重点是让ng-container作为组件宿主工作。目前，如果你尝试这个会发生什么是你得到ASSERTION ERROR: "ng-container" tags cannot be used as component hosts. Please use a different tag to activate the MyFragmentComponent component.

【解决方案3】：

“ng-container”是 Angular 2+ 中可用的元素，可以作为结构指令的宿主。

<ng-container> 
  <div>Foo</div>
  <div>Bar</div>
</ng-container>

【讨论】：

Angular 文档的相关阅读：angular.io/guide/…
不幸的是，如果您想从另一个组件/文件重用 Foo/Bar，这实际上不起作用。无论你把它放在哪里，它的父组件的标签都会包裹在 ng-container 标签周围。我也在寻找解决方案，因为我也来自 React...

【解决方案4】：

在撰写本文时，似乎并未直接支持此功能。一些评论者表示这可以在一些低级 API 的帮助下实现，但我还没有找到工作代码示例。

Angular Github 存储库中有一个开放的功能请求，围绕着如何为未来的版本（Angular 6 之后）添加这个进行积极讨论。

从 Github 仓库进一步阅读：

【讨论】：

您是否考虑过使用指令而不是组件？您能否发布一个工作代码来显示您想要实现的目标？在 Angular 中，您必须“思考 Angular”。并非总是可以将 React 功能与 Angular 功能映射（反之亦然）
@MassimoCosta - 我希望能够重用任意 HTML 块，而不用额外的节点污染 DOM。例如，我想让这段代码 sn-p 工作而不向 DOM 添加hello 组件。 stackblitz.com/edit/angular-kaxm27 。我对指令不是很熟悉，任何关于如何帮助解决这个问题的指导都非常感谢！