有相当于React片段的Angular 2+吗？

Question

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

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

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

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

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

React使我可以使用Fragment组件的概念完美地解决此问题，该组件使您可以对元素进行分组，而无需在DOM中添加其他节点。

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

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

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

Answer 1

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

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