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

Question

2017年更新：

ViewChild将成为访问Dom元素的最佳方式。

2016年发布的问题：

我尝试了以下两种方法，只有第二种方法可以生效。但我不想在每种方法中重复使用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>

方法一：

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

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

方法二：

...
class AppComponent {

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

- Ng2-Fun

---

你想问什么？如果可以的话，请发布更多的代码或Plunkr。似乎你所发布的两种方法是相同的，是吗？ - Pardeep Jain

我知道变量看起来一样，但实际上对于DOM元素，在方法内部和外部声明DOM元素变量是有区别的。这似乎很奇怪，但在第一个方法失败后，我得出了这个结论。 - Ng2-Fun

你得出了什么结论？这两者之间有什么主要区别吗？如果有，请提供答案，可能对其他人有帮助。 - Pardeep Jain

Answer 1

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

您可以通过ViewChild访问该元素：

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

    @ViewChild('itemId') itemId; 

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

- mahdi kallel

Answer 2

根据您的问题，您想在多个方法中使用一些常见的代码部分。但是您没有成功。只需声明一个单一变量并为该变量分配一些值，然后您就可以像这样在多个方法中使用该变量，或者我们可以使用 Angular 的双向数据绑定将此变量值绑定到 [(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

- Pardeep Jain

---

我已经尝试了你上面的代码，它也不起作用。你有测试过吗？ - Ng2-Fun

请查看附加链接中的工作演示。您也可以使用双向数据绑定。 - Pardeep Jain

谢谢你的帮助。很抱歉我在Plunker上创建angular2应用程序时遇到了问题，无法编辑您在Plunker上的代码。但是我已经更新了上面的代码。你误解了我的问题。我的问题都是关于通过document.getElementById()操作DOM的。因为我想播放/暂停视频，所以必须获取该元素。问题是如果我在方法外定义videoElement变量与在方法内定义不同。第一个方法会出错，当它在方法外定义时我们无法访问DOM元素。你能给我授权编辑你的plunker吗？ - Ng2-Fun

哎呀，我找不到任何 MP4 占位符来显示视频。而且这个 Plunker 对我来说是不可编辑的。 - Ng2-Fun