我想提取组件的一部分而不实际在物理 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
内的标签要出现的组件
最佳答案
“ng-container”是 Angular 2+ 中可用的元素,可以充当结构指令的宿主。
<ng-container>
<div>Foo</div>
<div>Bar</div>
</ng-container>
关于javascript - 是否有与 React Fragments 等效的 Angular 2+?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52155283/