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

Question

Angular documentation解释说，结构指令，例如 <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

有special section for grammar of structual directives在 Angular 文档中。

你可以查看我的interactive DEMO

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

一旦 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="$implicit" // 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 在这里被视为第一个模板绑定(bind)键。

现在是时候使用另一个键或变量了:

*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

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

*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"
               

如您所见，我们可以定义键值或设置 template input variables通过 let 或作为 关键字

如果你认为 Angular 文档没有完全解释它，那么你可以关注 the source code

  // Parses the AST for `<some-tag *tplKey=AST>`
  parseTemplateBindings(tplKey: string): TemplateBindingParseResult {
    let firstBinding = true;
    const bindings: TemplateBinding[] = [];
    const warnings: string[] = [];
    do {
      const start = this.inputIndex;
      let rawKey: string;
      let key: string;
      let isVar: boolean = false;
      if (firstBinding) {
        rawKey = key = tplKey;
        firstBinding = false;
      } else {
        isVar = this.peekKeywordLet();
        if (isVar) this.advance();
        rawKey = this.expectTemplateBindingKey();
        key = isVar ? rawKey : tplKey + rawKey[0].toUpperCase() + rawKey.substring(1);
        this.optionalCharacter(chars.$COLON);
      }

      let name: string = null !;
      let expression: ASTWithSource|null = null;
      if (isVar) {
        if (this.optionalOperator('=')) {
          name = this.expectTemplateBindingKey();
        } else {
          name = '\$implicit';
        }
      } else if (this.peekKeywordAs()) {
        this.advance();  // consume `as`
        name = rawKey;
        key = this.expectTemplateBindingKey();  // read local var name
        isVar = true;
      } else if (this.next !== EOF && !this.peekKeywordLet()) {
        const start = this.inputIndex;
        const ast = this.parsePipe();
        const source = this.input.substring(start - this.offset, this.inputIndex - this.offset);
        expression = new ASTWithSource(ast, source, this.location, this.errors);
      }

      bindings.push(new TemplateBinding(this.span(start), key, isVar, name, expression));
      if (this.peekKeywordAs() && !isVar) {
        const letStart = this.inputIndex;
        this.advance();                                   // consume `as`
        const letName = this.expectTemplateBindingKey();  // read local var name
        bindings.push(new TemplateBinding(this.span(letStart), letName, true, key, null !));
      }
      if (!this.optionalCharacter(chars.$SEMICOLON)) {
        this.optionalCharacter(chars.$COMMA);
      }
    } while (this.index < this.tokens.length);

    return new TemplateBindingParseResult(bindings, warnings, this.errors);
}

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

另请参阅

• https://angular.io/guide/structural-directives#structural-directive-syntax-reference