如何在Angular2中的模板中声明一个variables
我有以下模板：
<div> <span>{{aVariable}}</span> </div> 并想结束：
<div "let a = aVariable"> <span>{{a}}</span> </div>
有办法吗？
更新3
问题2451在Angular 4.0.0中修复
也可以看看
- https://github.com/angular/angular/pull/13297
- https://github.com/angular/angular/commit/b4db73d
- https://github.com/angular/angular/issues/13061
更新2
这不被支持。
有模板variables，但不支持分配任意值。 它们只能用于引用它们所应用的元素，导出指令或组件的名称以及用于结构指令的作用域variables，例如ngFor ，
另见https://github.com/angular/angular/issues/2451
更新1
@Directive({ selector: '[var]', exportAs: 'var' }) class VarDirective { @Input() var:any; }
并像这样初始化它
<div #aVariable="var" var="abc"></div>
要么
<div #aVariable="var" [var]="'abc'"></div>
并使用像这样的variables
<div>{{aVariable.var}}</div>
（未testing）
-
#aVariable创build对#aVariable的引用（exportAs: 'var'） -
var="abc"实例化VarDirective并将string值"abc"传递给它的值input。 -
aVariable.var读取分配给var指令varinput的值。
更新
正如@凯斯在评论中提到的
这将在大多数情况下工作，但它不是一个通用的解决scheme，因为它依赖于variablestruthy
所以起源的答案就像@凯斯说的那样。 这里还有一个方法。 我们可以像*ngIf那样创build指令并将其称为*ngVar
NG-var.directive.ts
@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); } }
用这个*ngVar指令我们可以使用下面的代码
<div *ngVar="false as variable"> <span>{{variable | json}}</span> </div>
要么
<div *ngVar="false; let variable"> <span>{{variable | json}}</span> </div>
要么
<div *ngVar="45 as variable"> <span>{{variable | json}}</span> </div>
要么
<div *ngVar="{ x: 4 } as variable"> <span>{{variable | json}}</span> </div>
Plunker示例Angular4 ngVar
也可以看看
- Angular 4在哪里为* ngIf定义“as local-var”行为？
起源
angularv4
1） div + ngIf + let
<div *ngIf="{ a: 1, b: 2 }; let variable"> <span>{{variable.a}}</span> <span>{{variable.b}}</span> </div>
2） div + ngIf + as
视图
<div *ngIf="{ a: 1, b: 2, c: 3 + x } as variable"> <span>{{variable.a}}</span> <span>{{variable.b}}</span> <span>{{variable.c}}</span> </div>
component.ts
export class AppComponent { x = 5; }
3）如果你不想像div一样创build包装，你可以使用ng-container
视图
<ng-container *ngIf="{ a: 1, b: 2, c: 3 + x } as variable"> <span>{{variable.a}}</span> <span>{{variable.b}}</span> <span>{{variable.c}}</span> </ng-container>
丑，但：
<div *ngFor="let a of [aVariable]"> <span>{{a}}</span> </div>
当与asynchronouspipe道一起使用时：
<div *ngFor="let a of [aVariable | async]"> <span>{{a.prop1}}</span> <span>{{a.prop2}}</span> </div>
这是我写的一个指令，它扩展了使用exportAs装饰器参数，并且允许你使用一个字典作为局部variables。
import { Directive, Input } from "@angular/core"; @Directive({ selector:"[localVariables]", exportAs:"localVariables" }) export class LocalVariables { @Input("localVariables") set localVariables( struct: any ) { if ( typeof struct === "object" ) { for( var variableName in struct ) { this[variableName] = struct[variableName]; } } } constructor( ) { } }
您可以在模板中使用它如下：
<div #local="localVariables" [localVariables]="{a: 1, b: 2, c: 3+2}"> <span>a = {{local.a}}</span> <span>b = {{local.b}}</span> <span>c = {{local.c}}</span> </div>
当然#local可以是任何有效的本地variables名称。
您可以通过在Angular 2中使用template元素或在Angular 4+中使用ng-template来在html代码中声明variables。
模板有一个上下文对象，其属性可以使用let绑定语法分配给variables。 请注意，您必须为模板指定一个sockets，但它可以是对自身的引用。
<template let-a="aVariable" [ngTemplateOutletContext]="{ aVariable: 123 }" [ngTemplateOutlet]="selfie" #selfie> <div> <span>{{a}}</span> </div> </template> <!-- Output <div> <span>123</span> </div> -->
您可以通过使用上下文对象的$implicit属性而不是自定义属性来减less代码量。
<template let-a [ngTemplateOutletContext]="{ $implicit: 123 }" [ngTemplateOutlet]="t" #t> <div> <span>{{a}}</span> </div> </template>
上下文对象可以是文字对象或任何其他绑定expression式。 即使pipe道被圆括号包围也似乎有效。
ngTemplateOutletContext有效示例：
-
[ngTemplateOutletContext]="{ aVariable: 123 }" -
[ngTemplateOutletContext]="{ aVariable: (3.141592 | number:'3.1-5') }" -
[ngTemplateOutletContext]="{ aVariable: anotherVariable }"与let-a="aVariable" -
[ngTemplateOutletContext]="{ $implicit: anotherVariable }"与let-a -
[ngTemplateOutletContext]="ctx"其中ctx是一个公共属性
