@HostBinding禁用子组件Angular 4中的类
我有一个角应用程序，其中有用户登录和注销。在用户登录之前，我会显示一个欢迎页面作为主页。我只想在欢迎页面上启用背景图像。一旦用户登录，背景图像必须消失。当用户注销时，他将被重定向到欢迎页面，该页面必须再次显示背景图像。
我尝试在app.component.ts中使用@HostBinding，将选择器重命名为“body”。
app.component.ts
import {Component, HostBinding, Input} from '@angular/core';
import {InputMask} from "primeng/primeng";
@Component({
selector: 'body',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
path = '../assets/img/AvayaHome.jpg';
title = 'app';
toggleClass = true;
@HostBinding('class.bodyClass') isWelcomePage = this.toggleClass;
}这是我的CSS。
app.component.css
.bodyClass {
background-image: url("../assets/img/AvayaHome.jpg");
}这是我的index.html
<!doctype html>
<html lang="en">
<head>
<title> Something </title>
</head>
<body class="bodyClass">
<app-welcome-page></app-welcome-page>
</body>
</html>我通过将toggleClass赋值为true来启用bodyClass的css样式。一旦用户登录，我就会更改子组件中的toggleClass (在app.component.ts中)的值。
这是我的login.component.ts
onLogin() {
console.log('onLogin() invoked:', this._email, ':' , this.password);
if (this._email == null || this.password == null) {
this.errorMessage = 'All fields are required';
return;
}
this.errorMessage = null;
this.loginservice.authenticate(this._email, this.password);
this.appComponent.toggleClass = true;
this.router.navigate(['/dashboard']);
}当用户登录为FALSE时，toggleClass的值会更改。但我仍然可以看到背景图像。不确定我做错了什么。任何帮助都将不胜感激。
回答 4
Stack Overflow用户
发布于 2017-11-16 12:33:05
作为一个例子，让我们看一下下面的代码：
var toggleClass = false;
var isWelcomePage = toggleClass;
console.log(isWelcomePage); // prints true酷，一切都像预期的那样工作。
十秒钟后……
一些用户登录：
toggleClass = true;
console.log(isWelcomePage); // prints false为什么它没有改变？
如果你打开任何关于javascript的文档或书籍，你可以读到一条主要规则：
基元始终是不可变的。
当我们使用=将toggleClass变量赋给isWelcomePage变量时，我们会将值复制到新变量中，因为基元是按值复制的。
解决方案1:
直接更改isWelcomePage属性
onLogin() {
...
this.appComponent.isWelcomePage = true;
...
}解决方案2
定义getter
@HostBinding('class.bodyClass')
get isWelcomePage() {
return this.toggleClass;
}Stack Overflow用户
发布于 2017-11-16 00:00:39
Stack Overflow用户
发布于 2017-11-16 00:52:22
用if和else做一个函数；
if (user is login) {
document.body.classList.add('bodyClass');
} else {
document.body.classList.remove('bodyClass');
}然后在需要时调用该函数，如logIn、logOut等
https://stackoverflow.com/questions/47311692
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号