时间戳

首页 > 解决方案 > Angular 6中不同路线的不同身体背景颜色

angular - Angular 6中不同路线的不同身体背景颜色

问题描述

我正在制作一个有角度的管理面板。当用户打开面板时，它会检查用户是否已通过身份验证。如果没有，它将被重定向到登录页面。

每个面板和登录组件都有不同的正文背景颜色。问题是当角度将用户重定向到登录页面时，背景颜色不会改变。

我必须在encapsulation: ViewEncapsulation.None任何地方使用。我不应该改变这一点。但万一我试图删除它，它仍然没有工作。我也尝试使用全局样式文件，但结果相同。

我有一些 plan-b 解决方案，但试图在这里找到最佳实践。

这些代码应该不是必需的，但这里是简化的代码：

// login.ts :
@Component({
    selector: 'app-login',
    templateUrl: './login.html',
    styleUrls: ['./login.scss'],
    encapsulation: ViewEncapsulation.None
})

. 

// login.scss :
body {
    background-color: #777;
}

和 ：

// panel.ts :
@Component({
    selector: 'app-panel',
    templateUrl: './panel.html',
    styleUrls: ['./panel.scss'],
    encapsulation: ViewEncapsulation.None
})
export class PanelComponent implements OnInit {
    ngOnInit() {
        if (!this.auth.isLogin()) {
            this.router.navigate(['/login']);
        }
    }
}

.

// panel.scss :
body {
    background-color: #eee;
}

标签： angular

解决方案

您需要向body元素添加额外的类并根据该类名称设置不同的颜色。你需要像这样使用ngAfterViewInit和ngOnDestroy生命周期钩子：

// login.ts :
ngAfterViewInit() {
    document.querySelector('body').classList.add('login');
}

ngOnDestroy() {
    document.querySelector('body').classList.remove('login');
}

那么您对该组件的样式将是：

// login.scss :
body.login {
    background-color: #777;
}

当然对于面板组件：

// panel.ts :
ngAfterViewInit() {
    document.querySelector('body').classList.add('panel');
}

ngOnDestroy() {
    document.querySelector('body').classList.remove('panel');
}

和风格：

// panel.scss :
body.panel {
    background-color: #eee;
}

推荐阅读