Angular2 + Typescript：如何操作DOM元素？

2017年更新： ViewChild將是訪問Dom元素的最佳方式。Angular2 + Typescript：如何操作DOM元素？

問題張貼在2016年

我曾嘗試以下兩種方法，只有方法2級的作品。但是我不想在每個方法中重複使用代碼：document.getElementById（）。我更喜歡方法1，但爲什麼方法1不起作用？

有沒有更好的方法來操縱Angular2中的DOM？

.html文件：

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

方法1：

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

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

方法2：

... 
class AppComponent { 

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

來源

2016-03-04 Ng2-Fun

要一個什麼sk？如果可能的話，張貼更多的代碼或plunkr。看起來你發佈的兩種方法都是一樣的嗎？ –

我知道它對於變量看起來是一樣的，但實際上對於DOM元素來說，在方法內部聲明一個DOM元素變量和外部方法是有區別的。這似乎很奇怪，但在第一種方法失敗後我得出了這個結論。 –

你得到的結論是什麼？這兩者之間有什麼重大區別？如果是的話，提供答案可能對其他人有幫助。 –

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

您可以通過ViewChild訪問元素：

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

    @ViewChild('itemId') itemId; 

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

來源

2017-03-09 17:18:36

根據你的問題，你要使用的代碼分成多個部分共用部分方法。但你沒有成功。只需要聲明一個單變量分配一些值變量，那麼你就可以使用該變量爲多個方法這樣，或者我們可以說綁定使用[(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>

這裏工作演示爲同一http://plnkr.co/edit/Y80SsPCUTx1UP5tYksIy?p=preview

來源

2016-03-04 18:14:34

我已經嘗試了上面的代碼，它也不起作用。你有沒有測試過它？ –

請看現在鏈接的工作演示。你也可以使用雙向數據綁定。 –

感謝您的幫助。抱歉，我有問題在Plunker上創建angular2應用程序，無法在Plunker上編輯您的代碼。但我已經更新了上面的代碼。你誤解了我的問題。我的問題是通過document.getElementById（）來操縱DOM。因爲我想播放/暫停視頻，所以我必須獲得該元素。事情是如果我定義的方法以外的videoElement變量不同於定義的內部方法。第一種方法會得到一個錯誤，當它在方法之外定義時，我們無法訪問DOM元素。你能授予我編輯你的搶劫者的權利嗎？ –

Angular2 + Typescript：如何操作DOM元素？

回答

相關問題