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

问题描述

我有以下模板:

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

并希望以:

<span>{{a}}</span>

有办法吗?

解决方案

更新

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

ng-var.directive.ts

@Directive({选择器:'[ngVar]'，})导出类 VarDirective {@输入()设置 ngVar(上下文:未知){this.context.$implicit = this.context.ngVar = 上下文；如果(！this.hasView){this.vcRef.createEmbeddedView(this.templateRef, this.context);this.hasView = true;}}私人上下文:{$隐含:未知；ngVar:未知；} = {$隐含:空，ngVar:空，};私有 hasView: boolean = false;构造函数(私有模板引用:模板引用<任何>，私有 vcRef: ViewContainerRef) {}}

通过这个 *ngVar 指令，我们可以使用以下内容

<span>{{变量 |json}}</span>

或

或

<span>{{变量 |json}}</span>

或

<span>{{变量 |json}}</span>

Plunker 示例 Angular4 ngVar

另见

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

原答案

Angular v4

1. div + ngIf + let

   {{变量.a}}{{变量.b}}

2. div + ngIf + as

查看

<span>{{variable.a}}</span><span>{{variable.b}}</span><span>{{variable.c}}</span>

component.ts

导出类 AppComponent {x = 5;}

3. 如果你不想创建像 div 这样的包装器，你可以使用 ng-container

查看

<span>{{variable.a}}</span><span>{{variable.b}}</span><span>{{variable.c}}</span></ng-容器>

正如@Keith 在评论中提到的

<块引用>

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

请参阅更新以了解另一种方法.

I have the following template :

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

and would like to end up with :

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

Is there a way to do it ?

解决方案

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: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef<any>,
        private vcRef: ViewContainerRef
    ) {}
}

with this *ngVar directive we can use the following

<div *ngVar="false as variable">
      <span>{{variable | json}}</span>
</div>

or

<div *ngVar="false; let variable">
    <span>{{variable | json}}</span>
</div>

or

<div *ngVar="45 as variable">
    <span>{{variable | json}}</span>
</div>

or

<div *ngVar="{ x: 4 } as variable">
    <span>{{variable | json}}</span>
</div>

Plunker Example Angular4 ngVar

See also

• Where does Angular 4 define "as local-var" behavior for *ngIf?

Original answer

Angular v4

1. div + ngIf + let

   {{variable.a}} {{variable.b}}

2. div + ngIf + as

view

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

view

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

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