Cách khai báo một biến trong một mẫu trong Angular

Tôi có mẫu sau:

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

và muốn kết thúc với:

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

Có cách nào để làm không?

Cập nhật

Chúng ta chỉ có thể tạo ra lệnh like *ngIfvà gọi nó*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);
  }
}

với *ngVarchỉ thị này, chúng ta có thể sử dụng như sau

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

hoặc là

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

hoặc là

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

hoặc là

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

Ví dụ Plunker Angular4 ngVar

Xem thêm

• Trường hợp Angular 4 định nghĩa hành vi "là local-var" cho * ng If?

Câu trả lời gốc

Góc 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

lượt xem

<div *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">
  <span>{{variable.a}}</span>
  <span>{{variable.b}}</span>
  <span>{{variable.c}}</span>
</div>

thành phần

export class AppComponent {
  x = 5;
}

3) Nếu bạn không muốn tạo trình bao bọc như divbạn có thể sử dụngng-container

lượt xem

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

Như @Keith đã đề cập trong các bình luận

điều này sẽ hoạt động trong hầu hết các trường hợp nhưng nó không phải là một giải pháp chung vì nó phụ thuộc vào biến là sự thật

Xem cập nhật cho một cách tiếp cận khác.

Xấu xí, nhưng:

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

Khi được sử dụng với ống async:

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

Bạn có thể khai báo các biến trong mã html bằng cách sử dụng một templatephần tử trong Angular 2 hoặc ng-templatetrong Angular 4+.

Mẫu có một đối tượng ngữ cảnh có thuộc tính có thể được gán cho các biến bằng letcú pháp ràng buộc. Lưu ý rằng bạn phải chỉ định một lối thoát cho mẫu, nhưng nó có thể là một tham chiếu đến chính nó.

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

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

Bạn có thể giảm số lượng mã bằng cách sử dụng thuộc $implicittính của đối tượng bối cảnh thay vì thuộc tính tùy chỉnh.

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

Đối tượng bối cảnh có thể là một đối tượng bằng chữ hoặc bất kỳ biểu thức ràng buộc nào khác. Ngay cả các đường ống dường như hoạt động khi được bao quanh bởi dấu ngoặc đơn.

Ví dụ hợp lệ của ngTemplateOutletContext:

• [ngTemplateOutletContext]="{ aVariable: 123 }"
• [ngTemplateOutletContext]="{ aVariable: (3.141592 | number:'3.1-5') }"
• [ngTemplateOutletContext]="{ aVariable: anotherVariable }" dùng với let-a="aVariable"
• [ngTemplateOutletContext]="{ $implicit: anotherVariable }" dùng với let-a
• [ngTemplateOutletContext]="ctx"nơi ctxlà một tài sản công cộng

cập nhật 3

Sự cố 2451 được khắc phục trong Angular 4.0.0

Xem thêm

• https://github.com/angular/angular/pull/13297
• https://github.com/angular/angular/commit/b4db73d
• https://github.com/angular/angular/issues/13061

cập nhật 2

Điều này không được hỗ trợ.

Có các biến mẫu nhưng nó không được hỗ trợ để gán các giá trị tùy ý. Chúng chỉ có thể được sử dụng để chỉ các yếu tố mà chúng được áp dụng, xuất khẩu tên của chỉ thị hoặc thành phần và biến phạm vi cho các chỉ thị cấu trúc nhưngFor ,

Xem thêm https://github.com/angular/angular/issues/2451

Cập nhật 1

@Directive({
  selector: '[var]',
  exportAs: 'var'
})
class VarDirective {
  @Input() var:any;
}

và khởi tạo nó như thế nào

<div #aVariable="var" var="abc"></div>

hoặc là

<div #aVariable="var" [var]="'abc'"></div>

và sử dụng biến như

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

(không được kiểm tra)

• #aVariabletạo một tham chiếu đến VarDirective(exportAs: 'var' )
• var="abc"khởi tạo VarDirectivevà truyền giá trị chuỗi"abc" cho đầu vào giá trị của nó.
• aVariable.varđọc giá trị được gán cho đầu vào varchỉ thị var.

Dưới đây là một chỉ thị mà tôi đã viết, mở rộng về việc sử dụng tham số trang trí exportAs và cho phép bạn sử dụng từ điển làm biến cục bộ.

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( ) {
    }
}

Bạn có thể sử dụng nó như sau trong một mẫu:

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

Tất nhiên #local có thể là bất kỳ tên biến cục bộ hợp lệ nào.

Tôi muốn đề xuất điều này: https://medium.com/@AustinMatherne/angular-let-directive-a168d4248138

Lệnh này cho phép bạn viết một cái gì đó như:

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

Trong trường hợp nếu bạn muốn nhận được phản hồi của hàm và đặt nó thành một biến, bạn có thể sử dụng nó như sau trong mẫu, sử dụng ng-containerđể tránh sửa đổi mẫu.

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

Và phương thức trong thành phần có thể giống như

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

Nếu bạn cần hỗ trợ tự động hoàn thành từ bên trong các mẫu của mình từ Dịch vụ Ngôn ngữ góc :

Đồng bộ:

myVar = { hello: '' };

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

Sử dụng ống không đồng bộ:

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

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

Nó đơn giản hơn nhiều, không cần thêm gì. Trong ví dụ của tôi, tôi khai báo biến "mở" và sau đó sử dụng nó.

   <mat-accordion class="accord-align" #open>
      <mat-expansion-panel hideToggle="true" (opened)="open.value=true" (closed)="open.value=false">
        <mat-expansion-panel-header>
          <span class="accord-title">Review Policy Summary</span>
          <span class="spacer"></span>
          <a *ngIf="!open.value" class="f-accent">SHOW</a>
          <a *ngIf="open.value" class="f-accent">HIDE</a>
        </mat-expansion-panel-header>
        <mat-divider></mat-divider>
        <!-- Quote Details Component -->
        <quote-details [quote]="quote"></quote-details>
      </mat-expansion-panel>
    </mat-accordion>

Tôi đang sử dụng 6x góc và tôi đã kết thúc bằng cách sử dụng đoạn trích dưới đây. Tôi đã có một scenerio nơi tôi sẽ tìm thấy người dùng từ một đối tượng tác vụ. nó chứa mảng người dùng nhưng tôi chọn người dùng được chỉ định.

<ng-container *ngTemplateOutlet="memberTemplate; context:{o: getAssignee(task) }">
</ng-container>
<ng-template #memberTemplate let-user="o">
  <ng-container *ngIf="user">
    <div class="d-flex flex-row-reverse">
      <span class="image-block">
        <ngx-avatar placement="left" ngbTooltip="{{user.firstName}} {{user.lastName}}" class="task-assigned" value="28%" [src]="user.googleId" size="32"></ngx-avatar>
      </span>
    </div>
  </ng-container>
</ng-template>

Tôi thích cách tiếp cận của việc tạo ra một chỉ thị để làm điều này (gọi tốt @yurzui).

Cuối cùng tôi đã tìm thấy một bài báo trung bình Chỉ thị "cho phép" giải thích vấn đề này một cách độc đáo và đề xuất một lệnh tùy chỉnh cho phép kết thúc tốt cho trường hợp sử dụng của tôi với các thay đổi mã tối thiểu.

Đây là ý chính (tại thời điểm đăng) với các sửa đổi của tôi:

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

Những thay đổi chính của tôi là:

• thay đổi tiền tố từ 'ng' thành 'ứng dụng' (bạn nên sử dụng bất kỳ tiền tố tùy chỉnh nào của ứng dụng của bạn)
• đổi appLet: TsangappLet: T | null

Không chắc chắn tại sao nhóm Angular chưa đưa ra một chỉ thị ngLet chính thức nhưng whatevs.

Tín dụng mã nguồn ban đầu được gửi tới @AustinMatherne

Câu trả lời ngắn giúp ai đó

• Biến tham chiếu mẫu thường tham chiếu đến phần tử DOM trong một mẫu.
• Cũng tham khảo các thành phần góc và web và chỉ thị.
• Điều đó có nghĩa là bạn có thể dễ dàng truy cập vào biến ở bất cứ đâu trong một mẫu

• Khai báo biến tham chiếu bằng ký hiệu băm (#)
• Có thể truyền một biến làm tham số cho một sự kiện

  show(lastName: HTMLInputElement){
    this.fullName = this.nameInputRef.nativeElement.value + ' ' + lastName.value;
    this.ctx.fullName = this.fullName;
  }

* Tuy nhiên, bạn có thể sử dụng trang trí ViewChild để tham chiếu nó bên trong thành phần của bạn.

import {ViewChild, ElementRef} from '@angular/core';

Tham chiếu biến FirstNameInput bên trong Thành phần

@ViewChild('firstNameInput') nameInputRef: ElementRef;

Sau đó, bạn có thể sử dụng this.nameInputRef bất cứ nơi nào trong Thành phần của bạn.

Làm việc với ng-template

Trong trường hợp của ng-template, nó hơi khác một chút vì mỗi mẫu có một bộ biến đầu vào riêng.

https://stackblitz.com/edit/angular-2-template-reference-variable

Đối với những người quyết định sử dụng chỉ thị cấu trúc để thay thế *ngIf, hãy nhớ rằng bối cảnh chỉ thị không được kiểm tra theo mặc định. Để tạo một thuộc tính chỉ thị an toàn ngTemplateContextGuardnên được thêm vào, hãy xem Nhập ngữ cảnh của lệnh . Ví dụ:

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

@Directive({
    // don't use 'ng' prefix since it's reserved for Angular
    selector: '[appVar]',
})
export class VarDirective<T = unknown> {
    // https://angular.io/guide/structural-directives#typing-the-directives-context
    static ngTemplateContextGuard<T>(dir: VarDirective<T>, ctx: any): ctx is Context<T> {
        return true;
    }

    private context?: Context<T>;

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

    @Input()
    set appVar(value: T) {
        if (this.context) {
            this.context.appVar = value;
        } else {
            this.context = { appVar: value };
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
        }
    }
}

interface Context<T> {
    appVar: T;
}

Lệnh này có thể được sử dụng giống như *ngIf, ngoại trừ việc nó có thể lưu trữ các giá trị sai :

<ng-container *appVar="false as value">{{value}}</ng-container>

<!-- error: User doesn't have `nam` property-->
<ng-container *appVar="user as user">{{user.nam}}</ng-container>

<ng-container *appVar="user$ | async as user">{{user.name}}</ng-container>

Hạn chế duy nhất so với *ngIflà Dịch vụ Ngôn ngữ Angular không thể tìm ra loại biến nên không có mã hoàn thành trong các mẫu. Tôi hy vọng nó sẽ được sửa chữa sớm.