Как добавить класс к телу при переходе к определенному компоненту или когда обновлять его? - PullRequest
Новая
       1

Как добавить класс к телу при переходе к определенному компоненту или когда обновлять его?

1 голос
/ 15 июня 2019

Проблема:

Я построил угловое приложение. Там я хочу добавить класс 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");
    };
  }
}

Но это работает неправильно. Когда я перехожу к этому компоненту, стили не добавляются, но когда я обновляю страницы, он добавляет стиль к телу. Я много пытался найти решение этой проблемы, но я не смог этого сделать. Может кто-нибудь помочь мне решить эту проблему? Спасибо!

Ответы [ 2 ]

1 голос
/ 15 июня 2019

Нет необходимости писать функцию onLoad внутри метода ngOnInit(). Предлагаю вам прочитать угловой официальный 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>

Демонстрационная версия

0 голосов
/ 15 июня 2019

Поскольку вы используете угловую маршрутизацию, это не будет работать, если вы не перейдете к этому компоненту вручную, потому что при переходе к ссылке на маршрутизатор приложение не перезагружается, просто удаляются другие компоненты и добавляется новый компонент. Это не вызывает событие onLoad. Но когда вы перезагрузите компьютер вручную, он будет работать.

попробуйте следующее 

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

и по компоненту html 

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

или что-то в аналогичных строках.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...