如何在Angular中声明模板中的变量

Question

我有以下模板:

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

并希望最终得到:

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

有办法吗？

Answer 1

更新

正如@Keith在评论中提到的那样

这在大多数情况下都有效,但它不是一般的解决方案,因为它依赖于变量的真实性

所以起源答案就像@Keith所说.这是另一种方法.我们可以像创建指令一样*ngIf调用它*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"行为？

起源

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

视图

<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>

Answer 2

丑陋,但是:

<div *ngFor="let a of [aVariable]">
  <span>{{a}}</span>
</div>

与异步管道一起使用时:

<div *ngFor="let a of [aVariable | async]">
  <span>{{a.prop1}}</span>
  <span>{{a.prop2}}</span>
</div>

Answer 3

更新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

这不受支持.

有模板变量,但不支持分配任意值.它们只能用于指它们被施加到元件,导出指令或组件和范围的变量的名称为类似的结构指示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>

并使用变量之类的

<div>{{aVariable.var}}</div>

(未测试)

• #aVariable创建对VarDirective(exportAs: 'var')的引用
• var="abc"实例化VarDirective并将字符串值传递"abc"给它的值输入.
• aVariable.var读取分配给var指令var输入的值.

Answer 4

您可以使用templateAngular 2或ng-templateAngular 4+中的元素在html代码中声明变量.

模板有一个上下文对象,可以使用let绑定语法将属性分配给变量.请注意,您必须为模板指定插座,但它可以是对自身的引用.

<ng-template let-a="aVariable" [ngTemplateOutletContext]="{ aVariable: 123 }" [ngTemplateOutlet]="selfie" #selfie>
  <div>
    <span>{{a}}</span>
  </div>
</ng-template>

<!-- Output
<div>
  <span>123</span>
</div>
-->

您可以使用$implicit上下文对象的属性而不是自定义属性来减少代码量.

<ng-template let-a [ngTemplateOutletContext]="{ $implicit: 123 }" [ngTemplateOutlet]="t" #t>
  <div>
    <span>{{a}}</span>
  </div>
</ng-template>

上下文对象可以是文字对象或任何其他绑定表达式.甚至管道似乎在被括号括起来时也能工作.

有效的例子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是公共财产

Answer 5

适合我的要求的一个简单的解决方案是：

 <ng-container *ngIf="lineItem.productType as variable">
       {{variable}}
 </ng-container>

或者

 <ng-container *ngIf="'ANY VALUE' as variable">
       {{variable}}
  </ng-container>

我正在使用Angular 版本： 12。看来它也可以与其他版本一起使用。

Answer 6

这是我编写的一个指令,它扩展了对exportAs装饰器参数的使用,并允许您将字典用作局部变量.

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可以是任何有效的局部变量名.

Answer 7

如果要获取函数的响应并将其设置为变量，可以在模板中像下面这样使用它，ng-container以避免修改模板。

<ng-container *ngIf="methodName(parameters) as respObject">
  {{respObject.name}}
</ng-container>

组件中的方法可以是这样的

methodName(parameters: any): any {
  return {name: 'Test name'};
}

Answer 8

如果您需要来自 Angular Language Service 的模板中的自动完成支持：

同步：

myVar = { hello: '' };

<ng-container *ngIf="myVar; let var;">
  {{var.hello}}
</ng-container>

使用异步管道：

myVar$ = of({ hello: '' });

<ng-container *ngIf="myVar$ | async; let var;">
  {{var.hello}}
</ng-container>

Answer 9

我建议这样做:https://medium.com/@AustinMatherne/angular-let-directive-a168d4248138

该指令允许您编写如下内容:

<div *ngLet="'myVal' as myVar">
  <span> {{ myVar }} </span>
</div>

Answer 10

使用 Angular 12 ：

  <div *ngIf="error$ | async as error">
     <span class="text-warn">{{error.message}}</span>
   </div>

Answer 11

我喜欢创建指令来执行此操作的方法（很好的调用@yurzui）。

我最终找到了一篇 Medium 文章Angular“let”指令，它很好地解释了这个问题，并提出了一个自定义的let 指令，该指令最终非常适合我的用例，只需最少的代码更改。

这是我修改后的要点（在发布时）：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'

interface LetContext <T> {
  appLet: T | null
}

@Directive({
  selector: '[appLet]',
})
export class LetDirective <T> {
  private _context: LetContext <T> = { appLet: null }

  constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef <LetContext <T> >) {
    _viewContainer.createEmbeddedView(_templateRef, this._context)
  }

  @Input()
  set appLet(value: T) {
    this._context.appLet = value
  }
}

我的主要改变是：

• 将前缀从“ng”更改为“app”（您应该使用应用程序的自定义前缀）
• 改变appLet: T为appLet: T | null

不知道为什么 Angular 团队不只是制定正式的 ngLet 指令，而是做什么。

原始源代码归功于@AustinMatherne

Answer 12

我试图做类似的事情，看起来这已经在新版本的 Angular中修复了。

    <div *ngIf="things.car; let car">
      Nice {{ car }}!
    </div>
    <!-- Nice Honda! -->