Açısal şablonda bir değişken nasıl bildirilir

Aşağıdaki şablon var:

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

ve sonuç olarak:

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

Yapmanın bir yolu var mı?

Güncelleme

Sadece direktifler oluşturabilir *ngIfve buna*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);
  }
}

bu *ngVardirektifle aşağıdakileri kullanabiliriz

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

veya

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

veya

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

veya

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

Plunker Örneği Açısal4 ngVar

Ayrıca bakınız

• Açısal 4, * ngIf için "yerel değişken olarak" davranışını nerede tanımlar?

Orijinal cevap

Açısal 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

görünüm

<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) divKullanabileceğiniz gibi sarıcı oluşturmak istemiyorsanızng-container

görünüm

<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 yorumlarda belirtildiği gibi

bu çoğu durumda işe yarayacaktır, ancak değişken bir doğruluk olduğu için genel bir çözüm değildir.

Başka bir yaklaşım için güncellemeye bakın.

Çirkin, ama:

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

Zaman uyumsuz boru ile kullanıldığında:

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

templateAçısal 2 veya ng-templateAçısal 4+ içindeki bir öğeyi kullanarak html kodundaki değişkenleri bildirebilirsiniz .

Şablonlar, özellikleri letbağlayıcı sözdizimi kullanılarak değişkenlere atanabilen bir bağlam nesnesine sahiptir . Şablon için bir çıkış belirtmeniz gerektiğini unutmayın, ancak bunun kendisi için bir referans olabilir.

<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Özel bir özellik yerine bağlam nesnesinin özelliğini kullanarak kod miktarını azaltabilirsiniz .

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

Bağlam nesnesi, değişmez bir nesne veya başka bir bağlayıcı ifade olabilir. Borular bile parantezle çevrili gibi görünüyor.

Geçerli örnekler ngTemplateOutletContext:

• [ngTemplateOutletContext]="{ aVariable: 123 }"
• [ngTemplateOutletContext]="{ aVariable: (3.141592 | number:'3.1-5') }"
• [ngTemplateOutletContext]="{ aVariable: anotherVariable }" La kullan let-a="aVariable"
• [ngTemplateOutletContext]="{ $implicit: anotherVariable }" La kullan let-a
• [ngTemplateOutletContext]="ctx"ctxkamu malı nerede

güncelleme 3

Sayı 2451, Açısal 4.0.0'da düzeltildi

Ayrıca bakınız

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

güncelleme 2

Bu desteklenmiyor.

Şablon değişkenleri var, ancak rastgele değerler ataması desteklenmiyor. Yalnızca uygulandıkları öğelere, direktiflerin veya bileşenlerin dışa aktarılan adlarına ve yapısal direktifler için kapsam değişkenlerine atıfta bulunmak için kullanılabilir ngFor,

Ayrıca bkz. Https://github.com/angular/angular/issues/2451

Güncelleme 1

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

ve şu şekilde başlat

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

veya

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

ve değişkeni aşağıdaki gibi kullanın

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

(test edilmedi)

• #aVariableVarDirective( exportAs: 'var') öğesine bir başvuru oluşturur
• var="abc"VarDirectivedize değerini başlatır ve dize değerini "abc"değer girdisine geçirir .
• aVariable.varvaryönergeler vargirişine atanan değeri okur .

Bunu öneririm: https://medium.com/@AustinMatherne/angular-let-directive-a168d4248138

Bu yönerge aşağıdaki gibi bir şey yazmanıza izin verir:

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

Burada, exportAs decorator parametresinin kullanımı üzerine genişleyen ve yerel bir değişken olarak bir sözlük kullanmanıza izin veren bir direktif var.

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

Bir şablonda aşağıdaki gibi kullanabilirsiniz:

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

Tabii ki #local geçerli herhangi bir yerel değişken adı olabilir.

Bir işlevin yanıtını almak ve bir değişkene ayarlamak isterseniz, şablonda ng-containerdeğişiklik yapmaktan kaçınmak için bunu şablonda aşağıdaki gibi kullanabilirsiniz .

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

Ve bileşendeki yöntem şöyle bir şey olabilir

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

Açısal Dil Hizmeti'ndeki şablonlarınızın içinden otomatik tamamlama desteğine ihtiyacınız varsa :

Senkron:

myVar = { hello: '' };

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

Zaman uyumsuz boru kullanma:

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

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

Açısal 6x kullanıyorum ve aşağıdaki snippet'i kullanarak bitirdim. Görev nesnesinden kullanıcı bulabileceğim bir senaryom var. kullanıcı dizisi içeriyor ancak atanmış kullanıcı seçmem gerekiyor.

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

Çok daha basit, ek bir şeye gerek yok. Örneğimde "open" değişkenini bildiriyorum ve sonra kullanıyorum.

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

Bunu yapmak için bir yönerge oluşturma yaklaşımını beğendim (iyi çağrı @yurzui).

Bu sorunu güzelce açıklayan ve asgari kod değişiklikleri ile kullanım durumum için harika bir sonuç veren özel bir izin yönergesi öneren bir Orta makale Açısal "let" Direktifi bulduk .

İşte değişikliklerimle birlikte (gönderme sırasında) öz:

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

Temel değişikliklerim:

• öneki 'ng' yerine 'app' olarak değiştirme (uygulamanızın özel öneki ne olursa olsun kullanmalısınız)
• değişen appLet: TiçinappLet: T | null

Açısal ekibin neden sadece resmi bir ngLet direktifi değil, aynı zamanda ne yaptığını da bilmiyoruz.

Orijinal kaynak kodu kredisi @AustinMatherne'a gidiyor

Birine yardım eden kısa cevap

• Şablon Referans değişkeni genellikle bir şablondaki DOM öğesine başvurur.
• Ayrıca açısal veya web bileşeni ve yönergesine atıfta bulunun.
• Bu, değişkenin bir şablonda herhangi bir yere kolayca erişebileceğiniz anlamına gelir

• Kare sembolünü (#) kullanarak referans değişkeni bildirin
• Bir değişkeni bir olaya parametre olarak iletebilir

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

* Bununla birlikte, bileşeninizde referans vermek için ViewChild dekoratörünü kullanabilirsiniz.

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

Bileşen içindeki firstNameInput değişkeni başvurusu

@ViewChild('firstNameInput') nameInputRef: ElementRef;

Bundan sonra, bu.nameInputRef bileşenini Bileşeninizin içinde herhangi bir yerde kullanabilirsiniz.

Ng-template ile çalışma

Ng-şablonu söz konusu olduğunda, biraz farklıdır çünkü her şablonun kendi girdi değişkenleri seti vardır.

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

Bunun yerine yapısal bir yönerge kullanmaya karar verenler için *ngIf, yönerge içeriğinin varsayılan olarak tür işaretli olmadığını unutmayın. Tür oluşturmak için güvenli yönerge ngTemplateContextGuardözelliği eklenmelidir, bkz . Yönerge bağlamını yazma . Örneğin:

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

Yönerge, yanlış değerleri *ngIfdepolaması dışında aynen kullanılabilir :

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

Karşılaştırma yapılan tek dezavantaj *ngIf, Açısal Dil Hizmetinin değişken türünü anlayamamasıdır, bu nedenle şablonlarda kod tamamlama olmaz. Umarım yakında düzeltilecektir.