css - 如何在导航到特定组件或刷新它时向正文添加类？

Question

问题:

我构建了一个 Angular 应用程序。我想在它导航到该组件时向主体添加一个 CSS 类，并在用户离开该组件时将其删除。

这就是我所做的。在全局 CSS 文件中，我定义了这样一个样式。

.background-color {
    background-image: linear-gradient(to right,#3f51b5, #00bcd4) !important;
  }

在登录组件中，我做了类似的事情。

import { Component, OnInit } from "@angular/core";


@Component({
  selector: "app-login",
  templateUrl: "./login.component.html",
  styleUrls: ["./login.component.css"]
})
export class LoginComponent implements OnInit {
  constructor() {
  }

  ngOnInit() {
    window.onload = function() {
      document.body.classList.add("background-color");
    };
  }
}

但这不能正常工作。当我导航到该组件时，未添加样式，但当我刷新页面时，它会将样式添加到正文中。我尝试了很多方法来找到解决这个问题的方法，但我无法这样做。有人可以帮我解决这个问题吗？谢谢!

Answer 1

无需在 ngOnInit() 方法中编写 onLoad 函数。建议你看angular官方ngOnit() .像下面这样重写你的 ngOnInit()

    ngOnInit() {
    let element = document.getElementById("bg-color");
    element.classList.add("background-color");
  }

和你的component.html文件

<p id="bg-color">
  Start editing to see some magic happen :)
</p>

Live Demo