dom - Angular2+ typescript : how to manipulate DOM element?

Question

2017 年更新:ViewChild 将是访问 Dom 元素的最佳方式。

2016 年发布的问题:

以下两种方法我都试过了，只有方法2有效。但是我不希望每个方法中都有重复的代码:document.getElementById()。我更喜欢方法一，但为什么方法一不行？

有没有更好的方法在 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();
    }
}

Answer 1

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

您可以通过 ViewChild 访问元素:

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

    @ViewChild('itemId') itemId; 

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