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元素？

回答

相关问题