So deklarieren Sie eine Variable in einer Vorlage in Angular

Ich habe die folgende Vorlage:

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

und möchte am Ende mit:

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

Gibt es eine Möglichkeit zu tun?

Aktualisieren

Wir können einfach eine Direktive wie erstellen *ngIfund sie nennen*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);
  }
}

Mit dieser *ngVarRichtlinie können wir Folgendes verwenden

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

oder

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

oder

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

oder

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

Plunker Beispiel Angular4 ngVar

Siehe auch

• Wo definiert Angular 4 das Verhalten "als local-var" für * ngIf?

Ursprüngliche Antwort

Winkel 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

Aussicht

<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) Wenn Sie keinen Wrapper erstellen möchten, wie divSie ihn verwenden könnenng-container

Aussicht

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

Wie @Keith in den Kommentaren erwähnt

Dies funktioniert in den meisten Fällen, ist jedoch keine allgemeine Lösung, da die Variable wahrheitsgemäß ist

Siehe Update für einen anderen Ansatz.

Hässlich, aber:

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

Bei Verwendung mit asynchroner Pipe:

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

Sie können Variablen in HTML-Code deklarieren, indem Sie ein templateElement in Angular 2 oder verwendenng-template Angular 4+ verwenden.

Vorlagen haben ein Kontextobjekt, dessen Eigenschaften Variablen mithilfe der letBindungssyntax zugewiesen werden können . Beachten Sie, dass Sie einen Ausgang für die Vorlage angeben müssen, dieser kann jedoch ein Verweis auf sich selbst sein.

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

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

Sie können die Codemenge reduzieren, indem Sie die $implicitEigenschaft des Kontextobjekts anstelle einer benutzerdefinierten Eigenschaft verwenden.

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

Das Kontextobjekt kann ein Literalobjekt oder ein anderer Bindungsausdruck sein. Sogar Rohre scheinen zu funktionieren, wenn sie von Klammern umgeben sind.

Gültige Beispiele für ngTemplateOutletContext:

• [ngTemplateOutletContext]="{ aVariable: 123 }"
• [ngTemplateOutletContext]="{ aVariable: (3.141592 | number:'3.1-5') }"
• [ngTemplateOutletContext]="{ aVariable: anotherVariable }" benutzen mit let-a="aVariable"
• [ngTemplateOutletContext]="{ $implicit: anotherVariable }" benutzen mit let-a
• [ngTemplateOutletContext]="ctx"Wo ctxist ein öffentliches Eigentum

Update 3

Problem 2451 wurde in Angular 4.0.0 behoben

Siehe auch

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

Update 2

Dies wird nicht unterstützt.

Es gibt Vorlagenvariablen, aber es wird nicht unterstützt, beliebige Werte zuzuweisen. Sie können nur verwendet werden, um auf die Elemente zu verweisen, auf die sie angewendet werden, exportierte Namen von Direktiven oder Komponenten und Bereichsvariablen für strukturelle Direktiven wiengFor ,

Siehe auch https://github.com/angular/angular/issues/2451

Update 1

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

und initialisiere es wie

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

oder

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

und benutze die Variable wie

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

(nicht getestet)

• #aVariable erstellt einen Verweis auf die VarDirective ( exportAs: 'var')
• var="abc" instanziiert die VarDirective und übergibt den Zeichenfolgenwert "abc"an seine Werteingabe.
• aVariable.varliest den Wert, der der Eingabe der varDirektiven zugewiesen ist var.

Hier ist eine Direktive, die ich geschrieben habe und die die Verwendung des exportAs decorator-Parameters erweitert und es Ihnen ermöglicht, ein Wörterbuch als lokale Variable zu verwenden.

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

Sie können es wie folgt in einer Vorlage verwenden:

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

Natürlich kann #local ein beliebiger gültiger lokaler Variablenname sein.

Ich würde dies vorschlagen: https://medium.com/@AustinMatherne/angular-let-directive-a168d4248138

Mit dieser Anweisung können Sie Folgendes schreiben:

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

Wenn Sie die Antwort einer Funktion abrufen und in eine Variable umwandeln möchten, können Sie sie wie folgt in der Vorlage verwenden ng-container, um Änderungen an der Vorlage zu vermeiden.

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

Und die Methode in der Komponente kann so etwas wie sein

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

Wenn Sie Unterstützung für die automatische Vervollständigung von innen in Ihren Vorlagen vom Angular Language Service benötigen :

Synchron:

myVar = { hello: '' };

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

Verwenden einer asynchronen Pipe:

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

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

Es ist viel einfacher, es ist nichts zusätzliches erforderlich. In meinem Beispiel deklariere ich die Variable "open" und verwende sie dann.

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

Ich verwende Angular 6x und habe am Ende das folgende Snippet verwendet. Ich habe ein Szenario, in dem ich Benutzer aus einem Aufgabenobjekt finden muss. Es enthält eine Reihe von Benutzern, aber ich muss den zugewiesenen Benutzer auswählen.

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

Ich mochte den Ansatz, eine Direktive zu erstellen, um dies zu tun (guter Ruf @yurzui).

Am Ende fand ich eine mittlere Artikel- Angular-Let-Direktive, die dieses Problem gut erklärt und eine benutzerdefinierte Let-Direktive vorschlägt , die für meinen Anwendungsfall mit minimalen Codeänderungen hervorragend funktioniert.

Hier ist das Wesentliche (zum Zeitpunkt der Veröffentlichung) mit meinen Änderungen:

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

Meine wichtigsten Änderungen waren:

• Ändern des Präfixes von 'ng' in 'app' (Sie sollten das benutzerdefinierte Präfix Ihrer App verwenden).
• wechseln appLet: TzuappLet: T | null

Ich bin mir nicht sicher, warum das Angular-Team nicht nur eine offizielle ngLet-Direktive erlassen hat, sondern was auch immer.

Das ursprüngliche Quellcode-Guthaben geht an @AustinMatherne

Kurze Antwort, die jemandem hilft

• Vorlagenreferenzvariable verweist häufig auf das DOM-Element in einer Vorlage.
• Verweis auch auf Winkel- oder Webkomponente und Direktive.
• Das heißt, Sie können überall in einer Vorlage problemlos auf die Variable zugreifen

• Deklarieren Sie die Referenzvariable mit dem Hash-Symbol (#).
• Kann eine Variable als Parameter für ein Ereignis übergeben

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

* Sie können jedoch ViewChild Decorator verwenden, um in Ihrer Komponente darauf zu verweisen.

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

Referenz firstNameInput-Variable in Component

@ViewChild('firstNameInput') nameInputRef: ElementRef;

Danach können Sie this.nameInputRef an einer beliebigen Stelle in Ihrer Komponente verwenden.

Arbeiten mit ng-template

Im Fall von ng-template ist dies etwas anders, da jede Vorlage ihre eigenen Eingabevariablen hat.

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

Beachten Sie für diejenigen, die sich entschieden haben, eine strukturelle Direktive als Ersatz für zu verwenden *ngIf, dass der Kontext der Direktive nicht standardmäßig typgeprüft ist. Informationen zum Erstellen einer typsicheren Direktiveneigenschaft ngTemplateContextGuardfinden Sie unter Typisieren des Kontextes der Direktive . Beispielsweise:

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

Die Direktive kann genauso verwendet werden *ngIf, außer dass sie falsche Werte speichern kann :

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

Der einzige Nachteil im Vergleich dazu *ngIfist, dass Angular Language Service den Variablentyp nicht ermitteln kann, sodass die Vorlagen keinen Code vervollständigen. Ich hoffe es wird bald behoben.