1

目前我正在学习 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);
    }
}

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

谢谢，

4

2 回答 2

1

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

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

于 2020-11-23T12:35:23.107 回答
0

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

我在这里找到了类似的答案。

于 2020-11-23T11:44:44.900 回答