1

我有一个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组件目前无法“知道”我已经更改了变量。但我不知道如何绑定它。我找到了这个 Stackblitz，但它是针对绑定字符串的——如何用 HostBinding 做同样的事情？

4

1 回答 1

0

您可以通过使其成为吸气剂来确保它hasSidebar始终是最新的：LayoutComponent

@HostBinding('class.show-menu') get hasSidebar(): boolean {
  return this.globals.sidebar;
}
于 2018-07-17T13:43:06.100 回答