Angular 4在哪里定义"as local-var"? * ngIf的行为? [英] Where does Angular 4 define "as local-var" behavior for *ngIf?
问题描述
我试图了解 ngIf 的作为本地变量"的可选行为在哪里定义，例如:
*ngIf="user$ | async as user"
I am trying to understand where is the "as local-var" optional behavior of ngIf defined, e.g.:
*ngIf="user$ | async as user"
尝试查看源代码中的明显位置，例如 https://github.com/angular/angular /blob/master/packages/common/src/directives/ng_if.ts
Tried looking into obvious places in source, like https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts
但是代码中没有任何内容，只有文档.
But nothing in the code, only docs.
有人知道这种魔术在代码中的什么地方吗?
Does anyone know where in the code this magic is happening ?
推荐答案
是的，在模板编译过程中会发生魔术.
Yeah, it's magic that happens during template compilation.
下面的模板
<div *ngIf="user$ | async as user"></div>
只是糖:
<ng-template [ngIf]="user$ | async" let-user="ngIf">
<div></div>
</ng-template>
答案是:以下字符串将值传递给此变量:
So the answer: the following string passes value to this variable:
this._context.$implicit = this._context.ngIf = condition;
^^^^^^^^^^^^^
https://github.com. com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts#L115
例如，我们可以创建结构指令ngVar:
For example we can create structural directive ngVar:
@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);
}
}
并按以下方式使用它:
<ng-template [ngVar]="true" let-x="ngVar"><div>{{x}}</div></ng-template>
或
<div *ngVar="true as x">{{x}}</div>
魔术是什么?
如果您想了解编译器的魅力所在，那么让我们看一个示例:
What's the magic?
If you want to understand where is the magic in compiler then let's take a look at an example:
<div *ngVar="true as x"></div>
1)Angular编译器将此字符串标记为:
1) Angular compiler tokenizes this string like:
<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根据这些标记创建元素的树:
2) HtmlParser creates element's tree based on these tokens:
Element div
attrs: name: *ngIf
value: true as x
3)TemplateParser构建AST(抽象语法节点)树.为此，TemplateParser使用名为 TemplateParseVisitor
3) TemplateParser builds AST(abstract syntax node) tree. To do this TemplateParser uses special visitor called TemplateParseVisitor
此访问者浏览上一步中收到的所有树.让我们看看编译器在 visitElement :
This visitor goes through all tree received in the previous step. And let's look at how it works when compiler comes to visitElement:
因此我们可以看到具有结构指令的任何模板，例如:
So as we can see any template with structural directive like:
*dir="someValue as someVar"
代表以下内容:
<ng-template [dir]="someValue" let-someVar="dir">
另请参阅:
- https://alexzuza.github.io/enjoy-ng-parser/
- Angular2: How is ngfor expanded
- How to declare a variable in a template in Angular2
这篇关于Angular 4在哪里定义"as local-var"? * ngIf的行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
