angolare 2 entrare in possesso di un elemento in angolare 2 per l'utilizzo nella progettazione Materiale lite

Question

voglio usare il Material Design Lite snackbar in angolare 2.

Ho cercato di entrare in possesso del Element nel mio modello come la seguente:

mio modello

<test> 
    <div id="child1"> child1 <div id="child2"> 
     <div id="child2"> child2 <div id="child2"> 
     <div id="toast_error"> Error message </div> 
     </div> 
    </div> 
    </div> 
</test> 

Nel mio file componente

constructor(private el:ElementRef){} 

ngOnInit(){ 
     this.show_error("something"); 
    } 
show_error(err){ 
     var snackbarContainer = this.el.nativeElement.querySelector("#toast_error") 
     var data = { 
      message: 'Button color changed.', 
      timeout: 2000, 
      actionText: 'Undo' 
     }; 

     snackbarContainer.MaterialSnackbar.showSnackbar(data); 
    } 

Viene visualizzato il seguente messaggio di errore. Come posso entrare in possesso dell'elemento con id toast_error

EXCEPTION: TypeError: Cannot read property 'MaterialSnackbar' of null in [null] 

PS: Ho controllato che this.el.nativeElement fa darmi il riferimento corretto

Modifica

A seguito delle risposte e commenti, posso ora ottenere tenere premuto l'elemento utilizzando lo stesso codice all'interno di ngAfterViewInit. Tuttavia, non riesco a far funzionare lo snackbar. Di seguito è riportato il codice aggiornato.

Nel mio file componente

constructor(private el:ElementRef){} 


    ngAfterViewInit(){ 
      var snackbarContainer = this.el.nativeElement.querySelector("#toast_error") 
      var data = { 
       message: 'Button color changed.', 
       timeout: 2000, 
       actionText: 'Undo' 
      }; 

      console.log(snackbarContainer.MaterialSnackbar); //prints undefined 
      //snackbarContainer.MaterialSnackbar.showSnackbar(data); 
     } 

I console.log() comando stampa indefinito. Ho fatto in modo che material.min.js sia caricato e controllato il file, esso include MaterialSnackbar. Come dovrei eseguire il debug di questo?

Answer 1

ho risolto il problema inserendo il codice ngAfterViewInit() e anche chiamando il upgradeElement come di seguito:

constructor(private el:ElementRef){} 

ngAfterViewInit(){ 
    window.componentHandler.upgradeAllRegistered(); 
    var snackbarContainer =   this.el.nativeElement.querySelector("#toast_error") 
        var data = { 
         message: 'Button color changed.', 
         timeout: 2000, 
         actionText: 'Undo' 
        };       
    snackbarContainer.MaterialSnackbar.showSnackbar(data); 
        } 

Answer 2

Se avete bisogno di un accesso diretto alla elemento DOM poi hanno la ElementRef iniettato:

constructor(ref: ElementRef) ... 

E poi accedere all'elemento DOM utilizzando:

ref.nativeElement 

Vedi here per ulteriori informazioni.

Quindi anziché OnInit, provare con AfterViewInit, per assicurarsi che il DOM sia inizializzato prima di eseguire la query DOM -> vedere here.

Answer 3

È possibile utilizzare variabili di modello e @ViewChild di entrare in possesso di un elemento specifico:

<div id="toast_error" #toastError> Error message </div> 



@ViewChile('toastError') toastErrorDiv; 

ngAfterViewInit() { 
    toastErrorDiv.doSomething(); 
}