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

Question

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

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

这个 app-layout 上面有一个 HostBinding 可以在上面设置一个 class （侧导航的存在与否需要通过 css 改变几件事） .

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

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

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

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 组件的主机绑定不会更新，class 也不会切换。

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

Answer 1

您可以确保 hasSidebar 在 LayoutComponent 中始终是最新的，方法是将其设为 getter:

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

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

Angular: toggle HostBinding from different component?

javascript

angular

angular2-hostbinding