时间戳

首页 > 解决方案 > 在 Angular 中调用 document.documentElement.classList.add 有什么问题吗？

angular - 在 Angular 中调用 document.documentElement.classList.add 有什么问题吗？

问题描述

我正在阅读很多内容，人们根本不应该在 Angular 中操作 DOM，有人可以向我解释为什么简单地调用：

document.documentElement.classList.add('some-class')

不好？

……还是我想多了？这是可以接受的吗？

如果错了，正确的方法是什么？

编辑：

确切地说，向上述添加类的正确方法是什么document.documentElement。

document.documentElement= 根元素 = <html>元素。

标签： angular

解决方案

解释

正如评论中提到的那样，Angular 不会承认这样的操作，所有操作都应该通过 Angular 完成。这保留了 DOM 的构建方式。这是一个完整的主题，我不是 100% 的。另一种方法是使用Angular 提供的renderer2旁边的ViewChild。

要记住的一件事是，有时在没有 DOM 可直接交互的情况下，需要在服务器或 Web Worker 中渲染应用程序。Renderer2 消除了直接 DOM 交互可能出现的任何问题。

解决方案

将 a#应用于要与 ViewChild 一起使用的元素。

<div #testDiv>
    some interesting content
</div>

在你的控制器中。

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

export class exampleComponent {
    constructor(private renderer: Renderer2) {}

    public @ViewChild('testDiv') testDiv: ElementRef;

    public addClass(): void
    {
        this.renderer.setAttribute(this.testDiv.nativeElement, 'class', 'example-class');
    }

}

还可以用。

this.renderer.addClass(this.testDiv.nativeElement, 'example-class')

这是使用renderer2的一些示例。

可能只使用 ViewChild 就可以侥幸成功，但想加入渲染器以显示如何与 DOM 交互。

this.testDiv.nativeElement.className = 'example-class';

推荐阅读