Angular2 + Typescript: come manipolare l'elemento DOM?

Question

Aggiornamento nel 2017: ViewChild sarà il modo migliore per accedere all'elemento Dom.

Domanda scritto nel 2016:

Ho provato i seguenti due metodi, unico metodo 2 opere. Ma non voglio il codice ripetuto: document.getElementById() in ogni metodo. Preferisco il metodo 1, ma perché il metodo 1 non funziona?

Esistono modi migliori per manipolare DOM in Angular2?

file HTML:

<video id="movie" width="480px" autoplay> 
    <source src="img/movie.mp4" type="video/mp4"> 
    Your browser does not support the video tag. 
</video> 

Metodo 1:

... 
class AppComponent { 
    videoElement = document.getElementById("movie"); 

    playVideo() { 
     this.videoElement.play(); 
    } 
} 

Metodo 2:

... 
class AppComponent { 

    playVideo() { 
     var videoElement = document.getElementById("movie"); 
     videoElement.play(); 
    } 
} 

Answer 1

<div #itemId>{{ (items()) }}</div> 

È possibile accedere all'elemento via ViewChild:

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

    @ViewChild('itemId') itemId; 

    ngAfterViewInit() { 
     console.log(this.itemId.nativeElement.value); 
    } 

Answer 2

Secondo la vostra domanda che si desidera utilizzare una parte comune di codice in più metodi. ma non hai avuto successo. solo dichiarare una singola variabile ed assegnare alcuni valori per la variabile allora sarà possibile utilizzare tale variabile in metodi diversi come questa o possiamo dire bind questo valore variabile con rilegatura due dati via della angolare utilizzando [(ngModel)]:

class A { 
     abc:string = null; 
     abc2:string = null; 

     abcFun(){ 
     console.log(this.abc) 
     } 

     bcdFun(){ 
     console.log(this.abc) 
     } 

     // second method using javascript as your way 
      abcFun2(){ 
      this.abc2 = document.getElementById('abc2').value; 
      console.log(this.abc2); 
      } 
      bcdFun2(){ 
      console.log(this.abc2); 
      } 
    } 

<input type="text" id="abc" [(ngModel)]="abc"> {{abc}} 

<button (click)="abcFun()">ABC FUN</button> 
<button (click)="bcdFun()">BCD FUN</button> 


<input type="text" id="abc2"> {{abc2}} 

<button (click)="abcFun2()">ABC FUN</button> 
<button (click)="bcdFun2()">BCD FUN</button> 

ecco demo funzionante per lo stesso http://plnkr.co/edit/Y80SsPCUTx1UP5tYksIy?p=preview