是的,所有的魔法都发生在编译器中。
让我们来看一下这个模板:
<div *ngFor="let foo of foobars">{{foo}}</div>
首先它将被转换为以下内容:
<div template="ngFor let foo of foobars>{{foo}}</div>
然后:
<template ngFor let-foo [ngForOf]="foobars"><div>{{foo}}</div></template>
在Angular2 rc.4中,它看起来像这样:![enter image description here](https://istack.dev59.com/F7avE.gif)
首先生成抽象语法树节点(Abstract Syntax Tree node),然后所有魔法都发生在TemplateParseVisitor.visitElement
(https://github.com/angular/angular/blob/2.0.0-rc.4/modules/%40angular/compiler/src/template_parser.ts#L284)中,特别是在底部(https://github.com/angular/angular/blob/2.0.0-rc.4/modules/%40angular/compiler/src/template_parser.ts#L394)。
if (hasInlineTemplates) {
var templateCssSelector = createElementCssSelector(TEMPLATE_ELEMENT, templateMatchableAttrs);
var templateDirectiveMetas = this._parseDirectives(this.selectorMatcher, templateCssSelector);
var templateDirectiveAsts = this._createDirectiveAsts(
true, element.name, templateDirectiveMetas, templateElementOrDirectiveProps, [],
element.sourceSpan, []);
var templateElementProps: BoundElementPropertyAst[] = this._createElementPropertyAsts(
element.name, templateElementOrDirectiveProps, templateDirectiveAsts);
this._assertNoComponentsNorElementBindingsOnTemplate(
templateDirectiveAsts, templateElementProps, element.sourceSpan);
var templateProviderContext = new ProviderElementContext(
this.providerViewContext, parent.providerContext, parent.isTemplateElement,
templateDirectiveAsts, [], [], element.sourceSpan);
templateProviderContext.afterElement();
parsedElement = new EmbeddedTemplateAst(
[], [], [], templateElementVars, templateProviderContext.transformedDirectiveAsts,
templateProviderContext.transformProviders,
templateProviderContext.transformedHasViewContainer, [parsedElement], ngContentIndex,
element.sourceSpan);
}
return parsedElement;
此方法返回EmbeddedTemplateAst
。它与以下代码相同:
<template ngFor let-foo [ngForOf]="foobars"><div>{{foo}}</div></template>
如果您想要转动:
<div *myDirective="item">{{item.stuff}}</div>
进入
<template myDirective let-item><div>{{item.stuff}}</div></template>
那么您需要使用以下语法:
<div *myDirective="let item">{{item.stuff}}</div>
但在这种情况下,您将无法传递上下文。您的自定义结构指令可能如下所示:
但是在这种情况下,您将无法传递上下文。您的自定义结构指令可能如下所示:
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
constructor(
private _viewContainer: ViewContainerRef,
private _templateRef: TemplateRef<any>) {}
@Input() set myDirective(prop: Object) {
this._viewContainer.clear();
this._viewContainer.createEmbeddedView(this._templateRef, prop); <== pass context
}
}
你可以像这样使用它:
<div *myDirective="item">{{item.stuff}}</div>
||
\/
<div template="myDirective:item">{{item.stuff}}</div>
||
\/
<template [myDirective]="item">
<div>{{item.stuff}}</div>
</template>
我希望这可以帮助你理解结构型指令的工作原理。
更新:
我们来看看它是如何工作的(plunker)
*dir="let foo v foobars" => [dirV]="foobars"
![在此输入图片描述](https://istack.dev59.com/HRSaw.gif)
因此,您可以编写以下指令:
@Directive({
selector: '[dir]'
})
export class MyDirective {
@Input()
dirV: any;
@Input()
dirK: any;
ngAfterViewInit() {
console.log(this.dirV, this.dirK);
}
}
@Component({
selector: 'my-app',
template: `<h1>Angular 2 Systemjs start</h1>
<div *dir="let foo v foobars k arr">{ foo }</div>
`,
directives: [MyDirective]
})
export class AppComponent {
foobars = [1, 2, 3];
arr = [3,4,5]
}
这里是相应的Plunker。
另请参阅
您可以在此处找到实时示例。
*dir="let foo of foobars"
将会是[dirOf]="toolbars"
。 - yurzui*dir="let foo v foobars"
=>[dirV]="foobars"
https://plnkr.co/edit/myE61PkX7UU4nAmGDQ1x?p=preview - yurzuits
文件的?我已经创建了一个单独的问题。在最新的npm版本中,他们似乎将所有内容都打包在一起而没有 sourcemaps。 - Max Koretskyi