Як оголосити змінну в шаблоні в Angular

У мене є такий шаблон:

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

і хотілося б закінчити:

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

Чи є спосіб це зробити?

Оновлення

Ми можемо просто створити директиву як *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?

Оригінальна відповідь

Кутовий 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>

компонент.ц

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>

Як згадував @Keith у коментарях

це працюватиме в більшості випадків, але це не є загальним рішенням, оскільки він покладається на те, що змінна є неправдоподібною

Дивіться оновлення для іншого підходу.

Некрасиво, але:

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

Ви можете оголосити змінні в коді html, використовуючи templateелемент у Angular 2 або ng-templateв Angular 4+.

У шаблонах є контекстний об'єкт, властивості якого можуть бути призначені змінним за допомогою 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публічна власність

оновлення 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/isissue/13061

оновлення 2

Це не підтримується.

Існують змінні шаблонів, але вони не підтримуються для призначення довільних значень. Їх можна використовувати лише для позначення елементів, до яких вони застосовуються, експортованих назв директив або компонентів та змінних областей для структурних директив, наприклад ngFor,

Дивіться також https://github.com/angular/angular/isissue/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.

Я б запропонував це: https://medium.com/@AustinMatherne/angular-let-directive-a168d4248138

Ця директива дозволяє вам написати щось на кшталт:

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

Ось директива, яку я написав, яка розширює використання параметра декоратора 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 може бути будь-яким дійсним місцевим ім'ям змінної.

У випадку, якщо ви хочете отримати відповідь функції і встановити її в змінну, ви можете використовувати її, як описано нижче в шаблоні, використовуючи, ng-containerщоб уникнути зміни шаблону.

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

І метод в компоненті може бути чимось на кшталт

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

Якщо вам потрібна автозаповнена підтримка зсередини у ваших шаблонах від служби Angular Language :

Синхронні:

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>

Я використовую кутовий 6x, і я закінчив, використовуючи фрагмент нижче. У мене є сценарій, де мені потрібно знайти користувача з об’єкта завдання. він містить масив користувачів, але я повинен вибрати призначеного користувача.

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

Це набагато простіше, не потрібно нічого додаткового. У своєму прикладі я оголошую змінну "відкритою", а потім використовую її.

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

Мені сподобався підхід створення директиви для цього (гарний дзвінок @yurzui).

Я в кінцевому підсумку знайшов середню статтю Angular "пускаю" директиву, яка добре пояснює цю проблему, і пропоную користувальницьку директиву дозволити, яка в кінцевому підсумку працювала чудово для мого використання з мінімальними змінами коду.

Ось суть (на момент публікації) з моїми модифікаціями:

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, але і whatevs.

Початковий код вихідного коду переходить до @AustinMatherne

Коротка відповідь, яка допомагає комусь

• Змінна посилання на шаблон часто посилається на елемент DOM у шаблоні.
• Також посилання на кутовий або веб-компонент та директиву.
• Це означає, що ви можете легко отримати доступ до змінної в будь-якому місці шаблону

• Оголосити опорну змінну за допомогою хеш-символу (#)
• Може передати змінну як параметр події

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

* Однак ви можете використовувати декоратор ViewChild для посилання на нього всередині свого компонента.

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

Посилання на змінну firstNameInput всередині компонента

@ViewChild('firstNameInput') nameInputRef: ElementRef;

Після цього ви можете використовувати this.nameInputRef в будь-якому місці вашого компонента.

Робота з ng-шаблоном

У випадку з ng-шаблоном він дещо інший, тому що кожен шаблон має свій набір змінних вводу.

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

Для тих, хто вирішив використовувати структурну директиву в якості заміни *ngIf, майте на увазі, що контекст директиви не перевіряється за замовчуванням. Щоб створити ngTemplateContextGuardвластивість безпечної директиви типу, слід додати, див. Введення контексту директиви . Наприклад:

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

Директива може використовуватися так само *ngIf, за винятком того, що вона може зберігати помилкові значення:

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

Єдиний недолік порівняно з *ngIfтим, що служба Angular Language не може з'ясувати тип змінної, тому в шаблонах немає заповнення коду. Я сподіваюся, що це скоро буде виправлено.