如何在Angular的模板中声明变量 [英] How to declare a variable in a template in Angular

问题描述

我有以下模板:

<div>
  <span>{{aVariable}}</span>
</div>

，并希望以:

<div "let a = aVariable">
  <span>{{a}}</span>
</div>

有办法吗?

推荐答案

更新

我们可以像创建*ngIf这样的指令并将其命名为*ngVar

Update

We can just create directive like *ngIf and call it *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指令，我们可以使用以下

with this *ngVar directive we can use the following

<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

Plunker Example Angular4 ngVar

另请参见

• Angular 4在何处定义作为本地变量" * ngIf的行为?

Angular v4

Angular v4

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这样的包装器，则可以使用ng-container

3) If you don't want to create wrapper like div you can use 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>

正如@Keith在评论中提到的

As @Keith mentioned in comments

这在大多数情况下都可以使用，但这不是一个通用的解决方案，因为它 依靠变量为真

this will work in most cases but it is not a general solution since it relies on variable being truthy

有关其他方法，请参见更新.

See update for another approach.

这篇关于如何在Angular的模板中声明变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！