Angular2 + Typescript: cách thao tác với phần tử DOM?

Question

Cập nhật vào năm 2017: ViewChild sẽ là cách tốt nhất để truy cập phần tử Dom.

Câu hỏi được đăng trong năm 2016:

Tôi đã thử hai phương pháp sau đây, chỉ có phương pháp 2 hoạt động. Nhưng tôi không muốn mã lặp lại: document.getElementById() trong mỗi phương thức. Tôi thích phương pháp 1, nhưng tại sao phương pháp 1 không hoạt động?

Có cách nào tốt hơn để thao tác DOM trong Angular2 không?

.html file:

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

Phương pháp 1:

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

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

Cách 2:

... 
class AppComponent { 

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

Answer 1

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

bạn có thể truy cập vào phần tử qua ViewChild:

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

    @ViewChild('itemId') itemId; 

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

Answer 2

Theo câu hỏi của bạn, bạn muốn sử dụng một số phần phổ biến của mã vào nhiều phương pháp. nhưng bạn đã không thành công. chỉ cần khai báo một biến duy nhất và gán một số giá trị để biến mà sau đó bạn sẽ có thể sử dụng biến đó vào nhiều phương pháp như thế này hay chúng ta có thể nói ràng buộc giá trị biến này với hai dữ liệu theo cách ràng buộc của góc bằng [(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> 

đây là bản demo làm việc cho cùng một http://plnkr.co/edit/Y80SsPCUTx1UP5tYksIy?p=preview