角为什么星号 (*) [英] Angular why asterisk (*)

问题描述

在 Angular 文档中，* 和模板，我们知道*ngIf、*ngSwitch、*ngFor可以扩展为ng-template标签.我的问题是:

In Angular document, * and template, we know that the *ngIf, *ngSwitch, *ngFor can be expanded to ng-template tag. My question is:

我认为没有 * 的 ngIf 或 ngFor 也可以被 Angular 引擎翻译和扩展为模板标签.

I think the ngIf or ngFor without * can also be translated and expanded to template tag by Angular engine.

以下代码

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

和

<ng-template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</ng-template>

那么为什么要在 Angular 中设计一个奇怪的符号星号(*)?

So why bother designing a strange symbol asterisk(*) in Angular?

推荐答案

Asterisk 语法是更冗长的模板语法的语法糖，它的指令扩展到引擎盖下，您可以自由使用这些选项中的任何一个.

Asterisk syntax is a syntatic sugar for more wordy template syntax which directive expands to under the hood, you are free to use any of these options.

引自文档:

星号是语法糖".它简化了 ngIf 和 ngFor既是作者又是读者.在引擎盖下，Angular 取代了星号版本，具有更详细的形式.

The asterisk is "syntactic sugar". It simplifies ngIf and ngFor for both the writer and the reader. Under the hood, Angular replaces the asterisk version with a more verbose form.

接下来的两个 ngIf 示例实际上是相同的，我们可以用任何一种风格编写:

The next two ngIf examples are effectively the same and we may write in either style:

<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

这篇关于角为什么星号 (*)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！