javascript - 是否有与 React Fragments 等效的 Angular 2+?

标签 javascript angular reactjs frontend angular6

我想提取组件的一部分而不实际在物理 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 内的标签要出现的组件

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

最佳答案

“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/

相关文章:

javascript - 模式中的表单以相同的操作提交(相同的 PHP 文件)

Angular2 : How to subscribe to Http. post observable inside a service and a component properly?

Angular 2 - 将数据从服务传递到组件

angularjs - React/Redux 等待商店更新

javascript - 如何使用javascript读取iframe中的webkitAllowFullScreen属性

javascript - 如何将输入标签设置为启用?

javascript - Angularjs ui-router改变状态但在传递参数时不更新url

Angular 4.3 拦截器 - 如何使用?

javascript - 如何在 React 中使用 .css 样式表?

mysql - NodeJS 中的 SQL Promise 返回空括号,但是当在 SQL Workbench 中执行相同的查询时,它返回正确的数据