Angular2 + Typescript: Wie manipuliert man das DOM-Element?

Question

Update in 2017: ViewChild wird der beste Weg, um Dom-Element zugreifen.

Frage im Jahr 2016 veröffentlicht:

ich die folgenden zwei Methoden versucht haben, nur Methode 2 funktioniert. Aber ich möchte nicht den wiederholten Code: document.getElementById() in jeder Methode. Ich bevorzuge Methode 1, aber warum Methode 1 nicht funktioniert?

Gibt es bessere Möglichkeiten, DOM in Angular2 zu manipulieren?

Html-Datei:

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

Methode 1:

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

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

Methode 2:

... 
class AppComponent { 

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

Answer 1

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

Sie das Element über ViewChild zugreifen:

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

    @ViewChild('itemId') itemId; 

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

Answer 2

Nach Ihrer Frage mögen Sie einigen gemeinsamen Teil des Codes in mehr verwenden Methoden. aber du hast keinen Erfolg. nur eine einzige Variable deklarieren und einige Werte dieser Variablen zugewiesen, dann werden Sie in der Lage sein, diese Variable in mehrere Methoden wie diese verwenden oder können wir binden diese Variable Wert mit Zweiweg-Datenbindung von Winkel mit [(ngModel)] sagen:

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> 

hier arbeitet Demo für den gleichen http://plnkr.co/edit/Y80SsPCUTx1UP5tYksIy?p=preview