角为什么星号 (*) [英] 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屋!