typescript < ng-container>对比< template>

cunj1qz1 于 2023-03-04 发布在 TypeScript

关注(0)|答案(6)|浏览(121)

官方文档中提到了ng-container，但我仍在努力理解它是如何工作的以及哪些是用例。
在ngPlural和ngSwitch指令中特别提到了它。
<ng-container>和<template>的作用是一样的，还是取决于是否编写了使用其中一个的指令？
是

<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>

以及

<template [ngPluralCase]="'=0'">there is nothing</template>

应该是一样的吗
我们该如何从中选择一个呢？
如何在自定义指令中使用<ng-container>？

typescript

来源：https://stackoverflow.com/questions/39547858/ng-container-vs-template

6条答案

按热度按时间

u5rb5r591#

编辑：现已记录

来拯救我们

Angular <ng-container>是一个分组元素，它不会干扰样式或布局，因为Angular不会将它放在DOM中。
（...）
<ng-container>是Angular解析器可以识别的语法元素，它不是指令、组件、类或接口，更像是JavaScript if块中的花括号：

if (someCondition) {
     statement1; 
     statement2;
     statement3;
    }

如果没有这些花括号，JavaScript将只执行第一条语句，当你打算有条件地把它们作为一个单独的块执行时，<ng-container>满足了Angular模板中类似的需求。

原始答案：

根据this pull request：
<ng-container>是一个逻辑容器，可用于对节点进行分组，但不会在DOM树中呈现为节点。
<ng-container>呈现为HTML注解。
这个Angular 模板

<div>
    <ng-container>foo</ng-container>
<div>

会产生这样的输出：

<div>
    <!--template bindings={}-->foo
<div>

因此，当你想在应用程序中有条件地附加一组元素（即使用*ngIf="foo"），但**不想用另一个元素 Package 它们时，ng-container是有用的。

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

将产生：

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>

赞(0）回复(0）举报 2023-03-04

nkcskrwz2#

文档（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>

..并且您不希望将输出 Package 在容器中。
你可以直接写去糖版本如下：

<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>

这将很好地工作。但是，现在我们需要ngIf使用括号[]代替星号 *，这会使人困惑（https://github.com/angular/angular.io/issues/2303）
因此，我们创建了一个不同的符号，如下所示：

<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>

两个版本将产生相同的结果（只有h1和p标签将被呈现）。第二个版本是首选，因为您可以像往常一样使用 *ngIf。

赞(0）回复(0）举报 2023-03-04

lrl1mhuk3#

在行为方面，这

<template [ngIf]="show">
  <h1></h1>
  <p></p>
</template>

相当于

<ng-container *ngIf="show">
  <h1></h1>
  <p></p>
</ng-container>

那么您应该使用哪一个呢？
ng-container是优选的，因为这样我们保留了结构指令用星号表示的惯例，例如*ngIf、*ngFor等。
然而，在某些情况下，我们必须使用template来代替，例如，当你需要通过模板名称来引用template标签时，例如<template #templateName>。
有关详细答案，请参见https://stackoverflow.com/a/40762236/7123519。