Zugriff auf lokale Variable innerhalb * ngIf

Question

Ich habe einen Primeng (Winkel 2) -Dialog mit einem Dropdown. Ich möchte den Fokus auf das Dropdown-Menü legen, wenn der Dialog angezeigt wird. Das Problem scheint zu sein, dass mein div bedingt wiedergegeben wird.

Mein Code:

<p-dialog (onShow)="fe.applyFocus()"> 
    <div *ngIf="selectedItem"> 
    <button pButton type="button" (click)="fe.applyFocus()" label="Focus"></button> 
    <p-dropdown #fe id="reason" [options]="reasonSelects" [(ngModel)]="selectedReason" ></p-dropdown> 
    </div> 
</p-dialog> 

In diesem Code die Taste funktioniert gut, aber die onShow() (außerhalb des *ngIf div) sagt mir fe nicht definiert ist.

Wie kann ich auf die lokale Variable innerhalb der *ngIf zugreifen?

Answer 1

Ja, das ist ein echter Schmerz. Leider, aufgrund der Art und Weise, wie * ngIf funktioniert, kapselt es alles vollständig ein (einschließlich des Tags, auf dem es sich befindet).

Dies bedeutet, dass alles, was an oder innerhalb des Tags mit dem ngIf deklariert wird, nicht außerhalb von ngIf "sichtbar" sein wird.

Und man kann nicht einfach selbst ein @ViewChild in den ts setzen, weil bei der ersten Ausführung nicht vorhanden sein könnte ... So gibt es zwei bekannte Lösungen für dieses Problem ...

a) Sie kann @ViewChildren verwenden. Dadurch erhalten Sie eine abonnierbare QueryList, die jedes Mal ausgelöst wird, wenn sich die tempatte-Variable ändert (dh die ngIf wird ein- oder ausgeschaltet).

(HTML-Vorlage)

<div>{{thing.stuff}}</div> 
<my-component #thing></my-component> 

(ts Code)

@ViewChildren('thing') thingQ: QueryList<MyComponent>; 
thing: MyComponent; 

ngAfterViewInit() { 
    this.doChanges(); 
    this.thingQ.changes.subscribe(() => { this.doChanges(); }); 
} 

doChanges() { 
    this.thing = this.thingQ.first; 
} 

b) Sie können mit einem Setter verwenden @ViewChild. Dadurch wird der Setter jedes Mal ausgelöst, wenn sich der ngIf ändert.

(HTML-Vorlage)

<div>{{thing.stuff}}</div> 
<my-component #thing></my-component> 

(ts Code)

@ViewChild('thing') set SetThing(e: MyComponent) { 
    this.thing = e; 
} 
thing: MyComponent; 

Beide Beispiele sollten Sie eine "Sache" Variable geben Sie jetzt in Ihrer Vorlage verwenden können, außerhalb des ngIf . Vielleicht möchten Sie der Variablen ts einen anderen Namen geben als die Variablen der Vorlage (#), falls Konflikte auftreten.