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中始终是最新的：

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

角度：从不同组件切换HostBinding？

1 个答案: