javascript - @HostBinding从子组件Angular 4禁用类

我有一个有用户登录和注销的角度应用程序。我在用户登录之前将欢迎页面显示为主页。我只想在欢迎页面上启用背景图像。用户登录后，背景图像必须消失。当用户注销时，他将被重定向到欢迎页面，该页面必须再次显示背景图像。

我尝试通过将选择器重命名为'body'在app.component.ts中使用@HostBinding。

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的值将更改。但是我仍然看到背景图像。不知道我在做什么错。任何帮助将不胜感激。

最佳答案

作为示例，让我们看一下这段代码：

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

定义吸气剂

@HostBinding('class.bodyClass')
get isWelcomePage() {
  return this.toggleClass;
}

关于javascript - @HostBinding从子组件Angular 4禁用类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47311692/

ToggleClass

javascript - @HostBinding从子组件Angular 4禁用类