在Angular 8中，哪一种是DOM操作的最佳方式[关闭]答案

【问题标题】：In Angular 8 which one is best preferable way for DOM manipulation [closed]在Angular 8中，哪一种是DOM操作的最佳方式[关闭]
【发布时间】：2021-03-06 03:01:54
【问题描述】：

目前我正在学习 Angular 8，我发现在少数文章中人们使用以下代码来获取 html DOM 元素。

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

@Component({
    selector: 'app',
    template: `
        <div #myDiv>Some text</div>
    `,
})
export class AppComponent implements AfterViewInit {
    @ViewChild('myDiv') myDiv: ElementRef;

    ngAfterViewInit() {
        console.log(this.myDiv.nativeElement.innerHTML);
    }
}

但与上面的代码相比，我们可以使用document.getElementById("myDiv") 获取html DOM元素，如下所示。

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

@Component({
    selector: 'app',
    template: `
        <div id="myDiv">Some text</div>
    `,
})
export class AppComponent implements AfterViewInit {

    ngAfterViewInit() {
        console.log(document.getElementById("myDiv").innerHTML);
    }
}

那么哪种方式更可取？为什么？
我试图在谷歌上找到答案，但找不到任何合适的技术和详细答案。

谢谢，

【问题讨论】：

标签： javascript angular typescript document elementref

【解决方案1】：

使用 Angular 时，不要使用 document.getElementById("myDiv").innerHTML，因为您不应该直接接触 DOM。
相反，您可以使用以下语法 @ViewChild('myDiv') myDiv: ElementRef，Angular 会为您获取 DOM 元素。
这样您就可以确保不会出现与直接操作 DOM 相关的任何不良行为。

我找到了一个类似的answer here.

【讨论】：

不明白为什么这个答案被否决了。我 100% 同意，我们不应该接触 DOM 元素。不管是 Angular 还是 React。
@Elmehdi，我已经阅读过此类声明，但我期待更多详细的技术答案。喜欢哪种不受欢迎的行为，为什么？
@Moon document 可以引用当前在 dom 中的每一个 html 元素，@ViewChild 只能访问组件模板内的元素。

【解决方案2】：

您永远不应该使用document.getElementById("myDiv") 的原因是Angular 的代码与平台无关。浏览器有渲染引擎，服务器也有渲染引擎。在服务器端渲染的情况下，浏览器的 API（window、document、navigator、...）根本不存在。这就是为什么 Angular 提供了一个抽象层，使代码独立于 DOM。

因此，尽管这种代码可能导致意外行为（由于某些 DOM 元素由 Angular 管理，同时由本机代码管理），但它会使您的代码“仅用于浏览器”并且您会输一些 Angular 框架的能力。

【讨论】：