@HostBinding 从子组件 Angular 4 中禁用类答案

【问题标题】：@HostBinding disabling class from child component Angular 4@HostBinding 从子组件 Angular 4 中禁用类
【发布时间】：2017-11-18 18:22:10
【问题描述】：

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

我尝试通过将选择器重命名为“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']);
  }

toggleClass 的值在用户登录到 FALSE 时发生变化。但我仍然看到背景图像。不知道我做错了什么。任何帮助将不胜感激。

【问题讨论】：

标签： javascript html css angular

【解决方案1】：

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

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;
}

【讨论】：

【解决方案2】：

用 if 和 else 做一个函数；

if (user is login) {
  document.body.classList.add('bodyClass');
} else {
  document.body.classList.remove('bodyClass');
}

而不是在需要时调用该函数，logIn logOut 等

【讨论】：

【解决方案3】：

如果你想动态显示和隐藏背景，你应该使用带有ngClass的条件类

您可以在此处阅读更多信息NgClass

在你的情况下是

<div [ngClass]="{'bodyClass': isWelcomePage}">    
    ...
</div>

那么bodyClass css 类只会应用IF isWelcomePage 是true，如果是false 则不会应用并且图像不会显示。

编辑：

根据要求，一个工作示例：Plunkr

【讨论】：

NgClass 适用于任何标签，但它必须在您的组件内。
如果你想做这样的事情，你应该有一个 root 组件来伪造 body 标签（跨越整个网站）。
我做了同样的事情，你可以在上面看到我的代码。但这仍然行不通。如果我误解了，你能在这里提供一个代码示例吗？谢谢！
你使用了@HostBinding，它不能像那样工作......我提供了一个工作示例。

【解决方案4】：

Hostbinding 仅将内容绑定到 host 标记，在您的 case 标记中。

所以如果你想操作 body 标签，你必须使用组件中的 plan javascript 来完成，或者在 body 中创建一个组件。

@Component({
  selector: 'body',
  template: `<child></child>`
})
export class AppComponent {
  @HostBinding('class') public cssClass = 'class1';
}

【讨论】：