angular2 ng容器
在Angular 2文档中提到了ng-container
,但没有解释它是如何工作的以及用例是什么。
在ngPlural
和ngSwitch
指令中特别提到。
<ng-container>
是否与<template>
<ng-container>
做同样的事情,或者取决于是否编写了一个指令来使用其中的一个?
是
<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>
和
<template [ngPluralCase]="'=0'">there is nothing</template>
应该是一样的?
我们如何select其中之一?
在自定义指令中如何使用<ng-container>
?
编辑:现在它被logging
<ng-container>
来救援Angular
<ng-container>
是一个分组元素,不会干扰样式或布局,因为Angular不会将其放在DOM中。(……)
这是Angularparsing器识别的语法元素。 这不是指令,组件,类或接口。 它更像是一个JavaScript if-block中的花括号:
if (someCondition) { statement1; statement2; statement3; }
如果没有这些大括号,JavaScript只会在您打算将所有这些条件作为一个块进行有条件执行时才执行第一条语句。 在Angular模板中满足相似的需求。
原始答案:
根据这个拉动要求 :
<ng-container>
是一个逻辑容器,可用于对节点进行分组,但不作为节点呈现在DOM树中。
<ng-container>
呈现为HTML注释。
所以这个angular模板:
<div> <ng-container>foo</ng-container> <div>
会产生这样的输出:
<div> <!--template bindings={}-->foo <div>
所以当你想在你的应用程序中附加一组元素(即使用*ngIf="foo"
), 而不想用另一个元素包装它们时, ng-container
是很有用的 。
<div> <ng-container *ngIf="true"> <h2>Title</h2> <div>Content</div> </ng-container> </div>
然后会产生:
<div> <h2>Title</h2> <div>Content</div> </div>
文档( https://angular.io/guide/template-syntax#!#star-template )给出了下面的例子。 假设我们有这样的模板代码:
<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>
在呈现之前,它将被“脱糖”。 也就是说,星号符号将被转录为符号:
<template [ngIf]="currentHero"> <hero-detail [hero]="currentHero"></hero-detail> </template>
如果'currentHero'是真的,这将被渲染为
<hero-detail> [...] </hero-detail>
但是如果你想要这样一个条件输出呢?
<h1>Title</h1><br> <p>text</p>
..你不希望输出包装在一个容器中。
你可以直接写下去糖的版本,就像这样:
<template [ngIf]="showContent"> <h1>Title</h1> <p>text</p><br> </template>
这将工作正常。 但是,现在我们需要ngIf括号[]而不是asterix *,这是混乱( https://github.com/angular/angular.io/issues/2303 )
出于这个原因,创build了一个不同的符号,如下所示:
<ng-container *ngIf="showContent"><br> <h1>Title</h1><br> <p>text</p><br> </ng-container>
两个版本都会产生相同的结果(只有h1和p标签会被渲染)。 第二个是首选,因为你可以使用* ngIf像往常一样。
用于ng-container
Imo用例是一个简单的替代品,对于这个用户来说,一个自定义的模板/组件将会被过度杀伤。 他们在API文档中提到了以下内容
使用ng-container来分组多个根节点
我想这就是所有关于:分组的东西。
请注意, ng-container
指令在指令包装实际内容的地方不是模板而是在模板之外。
一个用例,当你想使用一个表* ngIf和* ngFor – 因为把一个div放在td / th将会导致表格元素的错误行为 。 我面临这个问题, 那就是答案。