Wo definiert Angular 4 "als lokal-var" Verhalten für * ngIf? - eckig, rxjs, Open-Source

Ich versuche zu verstehen, wo das "as local-var" optionale Verhalten von ist ngIf definiert, z.B. *ngIf="user$ | async as user"

Versucht, offensichtliche Orte in der Quelle zu betrachten, wie https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts

Aber nichts im Code, nur Dokumente.

Weiß jemand wo im Code diese Magie passiert?

Antworten:

7 für die Antwort № 1

Ja, es ist Magie, die während der Template-Erstellung passiert.

Die Vorlage unten

<div *ngIf="user$ | async as user"></div>

ist nur Zucker für:

<ng-template [ngIf]="user$ | async" let-user="ngIf">
<div></div>
</ng-template>

Also die Antwort: Die folgende Zeichenfolge übergibt Wert an diese Variable:

this._context.$implicit = this._context.ngIf = condition;
^^^^^^^^^^^^^

https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts#L115

Zum Beispiel können wir strukturelle Anweisung ngVar erstellen:

@Directive({
selector: "[ngVar]",
})
export class VarDirective {
@Input()
set ngVar(context: any) {
this.context.$implicit = this.context.ngVar = context;
^^^^^^^^^^^^^^^^
this.updateView();
}

context: any = {};

constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) {}

updateView() {
this.vcRef.clear();
this.vcRef.createEmbeddedView(this.templateRef, this.context);
}
}

und benutze es entweder wie:

<ng-template [ngVar]="true" let-x="ngVar"><div>{{x}}</div></ng-template>

oder

<div *ngVar="true as x">{{x}}</div>

---

Was ist die Magie?

Wenn Sie wissen wollen, wo die Magie im Compiler liegt, schauen wir uns ein Beispiel an:

<div *ngVar="true as x"></div>

1) Angular Compiler tokenisiert diese Zeichenfolge wie folgt:

<div *ngVar="true as x"></div>
(1)   (2)      (3)   (4) (5)


(1) - TAG_OPEN_START
(2) - ATTR_NAME
(3) - ATTR_VALUE
(4) - TAG_OPEN_END
(5) - TAG_CLOSE

2) HtmlParser erstellt basierend auf diesen Token den Elementbaum:

Element div
attrs: name:  *ngIf
value: true as x

3) TemplateParser erstellt den AST-Baum (Abstract Syntax Node). Um dies zu tun TemplateParser verwendet speziellen Besucher namens TemplateParseVisitor

Dieser Besucher durchläuft den gesamten Baum, der im vorherigen Schritt empfangen wurde. Und schauen wir uns an, wie es funktioniert, wenn der Compiler dazu kommt visitElement:

So, wie wir jede Vorlage mit strukturellen Anweisung sehen können, wie:

*dir="someValue as someVar"

stellt Folgendes dar:

<ng-template [dir]="someValue" let-someVar="dir">

Siehe auch:

• https://alexzuza.github.io/enjoy-ng-parser/
• Angular2: Wie wird ngfor erweitert?
• Wie deklariert man eine Variable in einer Vorlage in Angular2?

---