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>

プランカーの例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>

@キースがコメントで述べたように

これはほとんどの場合に機能しますが、変数が真実であることに依存しているため、一般的な解決策ではありません

別のアプローチについては、更新を参照してください。

醜いですが：

<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コードで変数を宣言できます。 templateAngular 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/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>

（未検証）

• #aVariableVarDirective（exportAs: 'var'）への参照を作成します
• var="abc"をインスタンス化しVarDirective、文字列値"abc"をその値入力に渡します。
• aVariable.varvarディレクティブvar入力に割り当てられた値を読み取ります。

これは、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は任意の有効なローカル変数名にすることができます。

私はこれをお勧めします：https : //medium.com/@AustinMatherne/angular-let-directive-a168d4248138

このディレクティブを使用すると、次のように記述できます。

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

関数の応答を取得して変数に設定する場合は、テンプレートでのng-container変更を回避するために、テンプレートで次のように使用できます。

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

そして、コンポーネントのメソッドは次のようになります

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

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>

それははるかに簡単で、何も追加する必要はありません。私の例では、変数「open」を宣言して使用します。

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

私はangular 6xを使用していますが、最終的に以下のスニペットを使用しています。私は、タスクオブジェクトからユーザーを見つける必要があるscenerioを持っています。ユーザーの配列が含まれていますが、割り当てられたユーザーを選択する必要があります。

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

これを行うためのディレクティブを作成する方法が気に入りました（@yurzuiに電話してください）。

私は、この問題を適切に説明し、最小限のコード変更で私のユースケースにうまく機能するカスタムletディレクティブを提案する、Mediumの記事Angular "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に送られます

誰かを助ける短い答え

• テンプレート参照変数は、多くの場合、テンプレート内のDOM要素を参照します。
• 角度コンポーネントまたはWebコンポーネントおよびディレクティブも参照してください。
• つまり、テンプレート内のどこからでも変数に簡単にアクセスできます

• ハッシュ記号（＃）を使用して参照変数を宣言する
• イベントのパラメータとして変数を渡すことができます

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

*ただし、コンポーネント内でViewChildデコレーターを使用して参照できます。

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

Component内のfirstNameInput変数を参照する

@ViewChild('firstNameInput') nameInputRef: ElementRef;

その後、コンポーネント内の任意の場所でthis.nameInputRefを使用できます。

ng-templateの操作

ng-templateの場合、各テンプレートには独自の入力変数のセットがあるため、少し異なります。

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、false値を格納できることを除いて、と同じように使用できます。

<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 Serviceが変数の型を理解できないため、テンプレートにコード補完がないことです。すぐに修正されるといいですね。