Question

问题：

我已经构建了一个角度应用程序。在那里，我想在它导航到该组件时向其主体添加一个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函数。我建议您阅读有角度的官方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

Answer 2

由于您使用的是角向布线，因此除非您手动导航至该组件，否则这将无法工作，因为当您导航至路由器链接时，它不会重新加载应用程序，它只会删除其他组件并添加新组件。它不会触发onLoad事件。但是，当您手动重新加载时，它将起作用。

尝试以下

export class LoginComponent implements OnInit {
loaded: boolean = false;
constructor() {
}
ngOnInit() {
    this.loaded = true;
}

和组件html

<body [class.background-color]="loaded"></body>

或类似内容中的内容。

导航到特定组件或刷新它时，如何向主体添加类？

2 个答案: