Angular：从不同的组件切换 HostBinding？

Question

我有一个组件 app-layout，它为我的页面保存一个 sidenav 和一个路由器插座：

<div class="main-wrapper">
  <app-sidenav></app-sidenav>
  <main>
    <router-outlet></router-outlet>
  </main>
</div>

这个app-layout 上面有一个HostBinding 来设置一个类（sidenav 的存在与否需要通过css 改变一些东西）。

  @HostBinding('class.show-menu') hasSidebar;

加载到路由器插座的组件需要有一个按钮来切换hasSidebar 的值，以便应用或不应用该类。

所以，我设置了一个服务来保存布尔值

import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
  sidebar = true;
}

然后我将它添加到上面的app-layout 组件中，就像这样

import { Component, OnInit, HostBinding } from '@angular/core';
import { Globals } from 'app/globals';

@Component({
  selector: 'app-layout-site',
  templateUrl: './layout.component.html'
})
export class LayoutComponent implements OnInit {
  @HostBinding('class.show-menu') hasSidebar;

  constructor(private globals: Globals) {
    this.hasSidebar = this.globals.sidebar;
  }

  ngOnInit() {}
}

手动更改布尔值（在代码中）表明它有效。但现在我需要从其他组件切换这个值。在另一个组件中，我有：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Globals } from 'app/globals';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  private sidebar: boolean;

  constructor(private globals: Globals) {
    this.sidebar = globals.sidebar;
  }

  ngOnInit() {}

  toggleSidebar() {
    this.globals.sidebar = !this.globals.sidebar;
  }
}

我在这个组件中创建了一个按钮来调用toggleSidebar 函数。

但是，app-layout 组件的主机绑定不会更新，并且类不会切换。

我错过了什么？我猜app-layout 组件目前无法“知道”我已经更改了变量。但我不知道如何绑定它。我找到了this Stackblitz，但它是针对绑定字符串的——如何用 HostBinding 做同样的事情？

Answer 1

您可以确保hasSidebar 在LayoutComponent 中始终是最新的，方法是使其成为getter：

@HostBinding('class.show-menu') get hasSidebar(): boolean {
  return this.globals.sidebar;
}