Come verificare se ngIf ha preso effetto

Question

Quello che sto facendo
Ho un componente che nasconde/mostra utilizzando *ngIf sulla base di un semplice booleano. Quando il componente diventa visibile, voglio applicare lo stato attivo a un elemento figlio all'interno del suo modello.

Il problema
Se I flip il valore booleano della componente mostra correttamente, ma se poi cercare di ottenere un riferimento all'elemento figlio utilizzando this._elRef.nativeElement.querySelector("div#test") si tratta appena tornato null. Se aspetto qualche secondo, lo stesso codice restituirà il riferimento all'elemento come mi aspettavo.

speculazione
Sto assumendo che dopo lanciando l'angolare booleano passa attraverso un ciclo di rendering intera per rivelare il componente appena visibile e che questo non ha finito per il momento ho applicare la querySelector() nella riga successiva.

Quello che mi piacerebbe sapere
Quindi quello che mi chiedo è, come posso essere sicuro che il mio ngIf ha avuto effetto e gli elementi sono loro nel DOM di essere selezionati?
Esiste un callback per ngIf o posso forzare la visualizzazione per aggiornare e ottenere una richiamata da quello?

Spero che abbia senso. È stata una lunga giornata (lunga settimana) e sono super stanco.
Grazie a tutti

se aiuta, sto usando Angular2 v2.0.0-beta.15

Answer 1

Se si capovolgere il valore booleano per true e nella prossima riga di codice si tenta di ottenere un riferimento al componente o elemento DOM controllato da NgIf ... beh, quel componente o elemento DOM non esiste ancora. Angolare non funziona in parallelo con il tuo codice. Il callback JavaScript deve terminare, quindi viene eseguito il controllo Angolare (rilevamento modifiche), che noterà il cambiamento del valore booleano e creerà il componente o l'elemento DOM e lo inserirà nel DOM.

Per risolvere il problema, chiamare setTimeout(callbackFn, 0) dopo aver invertito il valore booleano. Questo aggiunge il tuo callbackFn allo JavaScript message queue. Ciò garantirà che Angular (rilevamento modifiche) venga eseguito prima della funzione di callback. Quindi, quando si esegue callbackFn, l'elemento che si desidera mettere a fuoco dovrebbe esistere. L'utilizzo di setTimeout(..., 0) assicura che il tuo callbackFn venga chiamato nel turno successivo di JavaScript event loop.

Questa tecnica di utilizzo di setTimeout(..., 0) viene utilizzata nella guida degli utili di LifeCycle dev quando si discute di AfterView* hooks.

Ecco alcuni altri esempi, se avete bisogno di ulteriori dettagli:

• https://stackoverflow.com/a/35752722/215945 - utilizza messa a fuoco()
• https://stackoverflow.com/a/34757864/215945 - utilizza Renderer chiamare focus
• https://stackoverflow.com/a/36338181/215945 - utilizza una direttiva per impostare il focus
• https://stackoverflow.com/a/34503163/215945 - mostra 4 modi diversi per farlo

Answer 2

Questa domanda è abbastanza vecchia e la soluzione corrente potrebbe non essere disponibile in quel momento.

Il metodo setTimeout() è perfettamente funzionante, ma ha uno svantaggio significativo. Se si imposta semplicemente una classe per posizionare un elemento, come ho fatto io, si ottiene un risultato saltuario, poiché il codice viene eseguito dopo il ciclo angolare.

L'utilizzo di ChangeDetectorRef produce un risultato che non salta.

Così, invece di questo:

class Foo { 
    public isDisplayed = false; 

    constructor(@Inject(ElementRef) private elementRef: ElementRef) { 
    } 

    public someMethod(): void { 
    this.isDisplayed = true; 
    setTimeout(() => { 
     const child = this.elementRef.nativeElement.querySelector('.child-element'); 
     // ... 
    }); 
    } 
} 

Si potrebbe fare questo:

class Foo { 
    public isDisplayed = false; 

    constructor(@Inject(ElementRef) private elementRef: ElementRef, 
       @Inject(ChangeDetectorRef) private changeDetectorRef: ChangeDetectorRef) { 
    } 

    public someMethod(): void { 
    this.isDisplayed = true; 
    this.changeDetectorRef.detectChanges(); 
    const child = this.elementRef.nativeElement.querySelector('.child-element'); 
    // ... 
    } 
}