Angular ng2-ng容器和ng模板标记之间的差异
有人能举例说明使用Angular ng2-ng容器和ng模板标记之间的差异,angular,Angular,有人能举例说明使用和元素之间的区别吗 我找不到NgContainer的文档,也不太了解模板标签之间的区别 每种方法的代码示例都会有很大帮助。这两种方法目前(2.x,4.x)都用于将元素分组在一起,而无需引入另一个将在页面上呈现的元素(例如div或span) 然而,模板需要糟糕的语法。比如说, <li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li> 你可以通过阅读找到更多细节
和
元素之间的区别吗
我找不到NgContainer
的文档,也不太了解模板标签之间的区别
每种方法的代码示例都会有很大帮助。这两种方法目前(2.x,4.x)都用于将元素分组在一起,而无需引入另一个将在页面上呈现的元素(例如
div
或span
)
然而,模板
需要糟糕的语法。比如说,
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>
你可以通过阅读找到更多细节
请注意,在4.x中
已被弃用,并更改为
使用
- 如果需要用于嵌套结构指令(如或)的辅助元素,或者如果希望在此类结构指令中包含多个元素李>
如果您需要使用
在不同位置标记的视图“代码段”,或ngForTemplate
ng模板
用于结构指令,如ng if
,ng for
和ng开关
。如果在没有structural指令的情况下使用它,则不会发生任何事情,它将渲染
ng容器
在没有合适的包装器或父容器时使用。在大多数情况下,我们使用div
或span
作为容器,但在这种情况下,我们需要使用多个结构指令。但是我们不能在一个元素上使用多个结构指令,在这种情况下,ng container
可以用作容器ng template
,顾名思义,表示模板。它本身不呈现任何东西。我们可以使用ng容器
提供一个占位符来动态呈现模板
ng模板的另一个用例是,我们可以使用它将多个结构指令嵌套在一起。
你可以在这篇博文中找到很好的例子:简单来说,
ng container
就像React的一个更高的组件,它只帮助呈现它的子元素
ng模板
基本上是用于Angular的内部实现,其中ng模板
中的任何内容在渲染时都会被完全忽略,并且基本上会成为对视图源的注释。这应该与Angular的内部指令一起使用,如ngIf
,ngSwitch
等。ng模板显示真实值。
<ng-template>
This is template block
</ng-template>
<ng-container>
This is container.
</ng-container>
这是模板块
输出:
ng容器无条件显示也显示内容。
<ng-template>
This is template block
</ng-template>
<ng-container>
This is container.
</ng-container>
这是一个集装箱。
输出:这是一个集装箱
ng模板
是用于呈现HTML的角度元素。它从不直接显示。用于结构指令,如:ngIf、ngFor、ngSwitch、…示例:
<div *ngIf="hero" class="name">{{hero.name}}</div>
{{hero.name}
Angular将*ngIf属性转换为一个
元素,环绕在宿主元素周围,如下所示
{{hero.name}
ng容器当没有合适的主机元素时,用作分组元素。
示例:
选择你最喜欢的英雄
(表示悲伤)
{{h.name}}({h.emotion}})
这是行不通的。因为某些HTML元素要求所有直接子元素都是特定类型的。例如,
元素需要子元素。您不能将选项包装在条件或
试试这个:
选择你最喜欢的英雄
(表示悲伤)
{{h.name}}({h.emotion}})
这会奏效的
更多信息:我喜欢将
作为在Angular.component.html文件中尽可能多地分离“逻辑”和“标记”的方法
(部分)呈现html表格行的示例:
<ng-container *ngFor="let product of products">
<tr>
<td></td>
<td>{{ product.productName }}</td>
<td>{{ product.productCode }}</td>
<td>{{ product.releaseDate }}</td>
<td>{{ product.price }}</td>
<td>{{ product.starRating }}</td>
</tr>
</ng-container>
{{product.productName}
{{product.productCode}
{{product.releaseDate}
{{product.price}}
{{product.starting}}
这样,如果我想从HTML
更改为其他内容,例如使用flexbox样式的一堆
,我不需要从
内部“雕刻”循环逻辑(或冒完全丢失它的风险)。它还可以防止循环(ngFor)逻辑被普通html部分掩盖 “讨厌的语法”可能有点夸张:这是将值传递给@Input()
s的正常语法<代码>*当然更方便。但是你是对的,
之所以被引入,是因为语法差异造成了相当多的混乱。不在DOM中引入新元素。那么...怎么样请在回答中澄清。此页帮助我了解了什么是:。如何使用n-container和ngFor来呈现表的行?我正在尝试,但它不起作用。我想有条件地呈现行,这样就可以在row元素上使用ngFor。这太棒了