Question

我想将不同的整页背景色应用于“登录”作为URL的登录页面。我在登录组件中使用ngAfterViewInit()和Renderer2。当我访问此页面并返回其他页面时，页面的所有背景都会像登录页面一样更改，但是我只希望登录页面的背景颜色更改。

使用Renderer2的“我的登录”组件

import {AfterViewInit, Component, ElementRef, OnInit, Renderer2} from '@angular/core';
import {Router} from '@angular/router';

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

  constructor(private elementRef: ElementRef, private router: Router, private renderer: Renderer2) {
    this.renderer.setStyle(document.body, 'background-color', 'yellow');
  }

  ngOnInit() {
  }
}

使用AfterViewInit的“我的登录”组件

从'@ angular / core'导入{AfterViewInit，Component，ElementRef，OnInit，Renderer2}；从“ @ angular / router”导入{Router}；

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

  constructor(private elementRef: ElementRef, private router: Router) {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = '#E7fff4';
    }
}

Answer 1

请进行以下更改：

ngOnInit() {
  this.renderer.setStyle(document.body, 'background-color', 'yellow');
}

ngOnDestroy() {
  this.renderer.removeStyle(document.body, 'background-color');
  // or whatever color you want to change when user move out of login page
}

Answer 2

一种方法是使用AfterViewInit和OnDestroy使用共享函数来切换主体类...

export class LoginComponent implements AfterViewInit, OnDestroy {

  toggleBackgroundClass(): void {
    document.querySelector('body').classList.toggle('your-class-name');
  }

  ngAfterViewInit(): void {
    this.toggleBackgroundClass();
  }

  ngOnDestroy(): void {
    this.toggleBackgroundClass();
  }

}

在加载组件时，它将设置背景类，而当您离开时，它将删除该类。您的CSS可以很简单：

body.your-class-name {
  background-color: #E7fff4;
}

Answer 3

删除渲染器和elementRef

要将其限制为组件，请将其添加到scss

:host{
   backgroundColor = '#E7fff4';
}

如何为角度中的某些特定网址应用不同的（整页）背景？

3 个答案: