Javascript 我如何在angular中为某些特定URL应用不同的(整页)背景?
我想用“login”作为URL在我的登录页面上应用不同的完整页面背景色。我在登录组件中使用了Javascript 我如何在angular中为某些特定URL应用不同的(整页)背景?,javascript,angular,typescript,Javascript,Angular,Typescript,我想用“login”作为URL在我的登录页面上应用不同的完整页面背景色。我在登录组件中使用了ngAfterViewInit()和renderr2。当我访问此页面并返回其他页面时,我的页面的所有背景都会像我的登录页面一样发生变化,但我只希望我的登录页面背景颜色发生变化 使用Renderer2的我的登录组件 import {AfterViewInit, Component, ElementRef, OnInit, Renderer2} from '@angular/core'; import {Ro
ngAfterViewInit()
和renderr2。当我访问此页面并返回其他页面时,我的页面的所有背景都会像我的登录页面一样发生变化,但我只希望我的登录页面背景颜色发生变化
使用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';
}
}
请进行以下更改:
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
}
请进行以下更改:
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
}
删除渲染器和elementRef 要将其限制为组件,请将其添加到SCS中
:host{
backgroundColor = '#E7fff4';
}
删除渲染器和elementRef 要将其限制为组件,请将其添加到SCS中
:host{
backgroundColor = '#E7fff4';
}
一种方法是使用AfterViewInit切换body类,使用共享函数切换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;
}
一种方法是使用AfterViewInit切换body类,使用共享函数切换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;
}
angularSet应该有一个相当于ng类的bool变量,用于
this.router.url=='/login'
,并且在父元素上放置类似于[ngClass]=“{'special-background-class':isLoginUrl}`和应用类。这里有一个问题,我想要完整的页面,即使我们有滚动页面也必须有这个背景色,所以这就像我们在标题标签的主体上设置了这个一样。我不能将这个应用到我的login.component.html文件,因为当我们滚动页面时,它在整个页面的高度上不能正常工作。相关问题:应该有一个等价的angularSet的ng类将布尔变量借给this.router.url==='/login'
,并在父元素上放置类似于[ngClass]=“{'special-background-class':isLoginUrl}`的内容并应用该类。这里有一个问题,我想要整页,即使我们有滚动页,也必须使用此背景色,所以这就像我们在标题标签的正文中设置的一样,我无法将其应用于我的login.component.html文件,因为当我们滚动页面时,它在整个页面高度上无法正常工作。相关问题: