Angulars 结构指令的确切语法是什么

Question

Angulars文档解释说，结构指令，例如<p *ngIf="a as b"></p>“脱糖”到<p [ngIf]="a" [ngIfAs]="b">.

脱糖使用microsyntax，允许表达式如下

let node; when: hasChild
a as b
let x of y; index = i; trackBy: f

该文档提供了一些微语法示例，并建议研究 的来源ngIf，但没有提供正式定义。

angular 结构指令的微语法的语法是什么？

Answer 1

Angular 文档中有专门的结构指令语法部分。

您可以查看我的交互式演示

那么，这里的逻辑是什么？

一旦 Angular 遇到结构指令，它就会尝试解析它：

 *dir="..."
/\
indicates that it's a structural directive

一开始有3种情况：

*dir="expr
       \/
   [dir]="expr"

*dir="let var  // also var can have value
       \/ // starts with keyword 'let', indicates variable
   [dir] let-x="$impicit"


*dir="as var
      \/ // starts with keyword 'as'
  let-x="$impicit" // it won't fail but your directive won't be instantiated
      

在表达式之后，您可以使用任一 as关键字来定义该表达式的模板输入变量或分隔符，例如空格、冒号、分号或逗号：

*dir="expr as var
 \/
[dir]="exp" let-var="dir"

*dir="expr[ ]
*dir="expr:
*dir="expr;
*dir="expr,

请注意，dir此处将其视为第一个模板绑定键。

现在是另一个键或变量的时候了：

*dir="expr key2
*dir="expr:key2
*dir="expr;key2
*dir="expr,key2

我们可以通过空格或分号为该键赋值：

*dir="expr key2 exp2
*dir="expr:key2 exp2
*dir="expr;key2 exp2
*dir="expr,key2 exp2
or
*dir="expr key2:exp2

这样我们就可以生成其他密钥。这些键大写并与第一个键连接。

*dir="expr key2 exp2 key3 exp3 ...
\/
[dir]="expr " [dirKey2]="exp2 " [dirKey3]="exp3"


let node; when: hasChild; otherKey: otherValue
  \/       \/      \/
  var     key    value
                         \/
dir [dirWhen]="hasChild" [dirOtherKey]="otherValue" let-node="$implicit"


*dir="let x of y; index = i; trackBy: f"
           \/
dir [dirOf]="y" [dirIndex]="= i" [dirTrackBy]="f" let-x="$implicit"

*dir="let x  of   y;  let index = i; trackBy: f"
        \/   \/   \/      \/           \/    \/
        var  key  value     var          key   value
                   \/
dir [dirOf]="y" [dirTrackBy]="f" let-x="$implicit" let-index="i"
               

如您所见，我们可以通过或作为定义键值或设置模板输入变量letkeywords

如果您认为 Angular 文档没有完全解释它，那么您可以按照源代码进行操作

 *dir="..."
/\
indicates that it's a structural directive

上面的代码描述了如何解析结构指令的算法。

也可以看看

• https://angular.io/guide/structural-directives#grammar

Answer 2

根据文档如下代码：

<div *ngIf="hero" class="name">{{hero.name}}</div>

变成：

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

Angular 在您的 div 周围创建这个 ng-template 标签，并在决定是否添加 div 之前评估 if 。ng-template 是一个幻像标签，不存在于 DOM 中（不会干扰 css）并执行一些逻辑。