如何解码我们的自定义指令中现有的结构指令字符串语法

Question

就像我说的，我想在自定义指令中使用现有的基于结构指令字符串的语法

<element *ngFor='let x of array;let last = last;'></element>

我没有找到任何详细的文档，说明我们如何在自定义结构指令中解码上述语法。我知道我们可以将此语法与所有结构指令 *xyz 一起使用，但我总是使用 [xyz] 代替。我试图找到 Angular 官方文档但一无所获。

所以我进入他们的代码来理解github 中的 *NgFor，除了他们如何解码语法之外，我得到了一切。

如果您看到选择器，如下所示

@Directive({selector: '[ngFor][ngForOf]'})

@Input()
set ngForTrackBy(fn: TrackByFunction<T>) {
    //definition
}

所有输入方法都以选择器前缀开头，例如ngForTrackBy。就只有这样吗？我们必须遵循选择器前缀吗？
如果是，那么我们可以使用这种基于前缀的方法做哪些其他事情？如果不是，那么正确的方法是什么？

Answer 1

编译器的工作是匹配用let语法定义的变量和传递到嵌入视图中的上下文。您可以根据需要定义任意多个变量，但如果不通过上下文传递它们的值，它们的值将是未定义的。

在这里，我使用自定义my指令并定义两个变量a，语法b如下let：

<ng-template my let-a=a let-b=b let-c=c>
  <span>inside my, a is {{a}}, b is {{b}}, c is undefined: {{c === undefined}}</span>
</ng-template>

然后，在描述指令时，我将带有变量值的上下文传递给嵌入视图：

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[my]'
})
export class MyDirective {
  constructor(public vc: ViewContainerRef, public t: TemplateRef<any>) {
  }

  ngOnInit() {
    const t = this.vc.createEmbeddedView(this.t, {a: 3, b: 4});
  }
}

对于指令来说也是如此ngForOf，以下是上下文如何查找它：

export class NgForOfContext<T, U extends NgIterable<T> = NgIterable<T>> {
  constructor(public $implicit: T, public ngForOf: U, public index: number, public count: number) {}

  get first(): boolean {
    return this.index === 0;
  }

  get last(): boolean {
    return this.index === this.count - 1;
  }

  get even(): boolean {
    return this.index % 2 === 0;
  }

  get odd(): boolean {
    return !this.even;
  }
}

您还可以将简写语法与自定义指令一起使用：

<span *my="let a=a; let b=b; let c=c;">inside my, a is {{a}}, b is {{b}}, c is undefined: {{c === undefined}}</span>