Angular 2：页面组件调用公共方法无法隐藏侧边栏问题求解

1. 服务多实例问题（最高发） #

Angular 服务默认单例的前提是仅在根注入器/全局唯一的共享模块中声明一次，只要出现以下配置错误，就会生成多个独立的NavService实例：

• HeaderComponent的@Component.providers数组中单独声明了NavService
• 业务页面组件所在模块的providers数组中重复声明了NavService
  两个组件操作的是不同实例的collapseSidebar属性，因此业务组件修改状态后不会触发侧边栏变化。

2. 变更检测未触发（概率较低） #

如果侧边栏组件开启了ChangeDetectionStrategy.OnPush变更检测策略，且collapseSidebar是普通布尔值属性，没有用响应式对象包裹，可能出现状态更新后视图未重新渲染的情况（该情况通常会导致Header的修改也失效）。

方案1：修正服务注入配置（解决多实例问题） #

移除所有组件（HeaderComponent、业务页面组件）@Component.providers中声明的NavService，确保全局只有一个服务实例，推荐直接在NavService中指定根注入器：

@Injectable({
  providedIn: 'root' // 指定根注入器，无需在任何模块的providers中重复声明
})
export class NavService {
  public screenWidth: any
  public collapseSidebar: boolean = false;

  constructor(private http: HttpClient,) {
    this.onResize();
    if (this.screenWidth < 991) {
      this.collapseSidebar = true
    }
  }
}

改完后Header和业务组件的原有触发逻辑不需要调整，即可正常生效。

方案2（推荐，彻底解决变更检测问题） #

用RxJS可观察对象管理侧边栏状态，避免OnPush策略下的视图不更新问题：

改造NavService #

import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NavService {
  public screenWidth: any
  private _collapseSidebar = new BehaviorSubject<boolean>(false);
  // 对外暴露只读的可观察对象
  public collapseSidebar$ = this._collapseSidebar.asObservable();

  constructor(private http: HttpClient,) {
    this.onResize();
    if (this.screenWidth < 991) {
      this._collapseSidebar.next(true)
    }
  }

  // 统一的状态切换方法
  toggleSidebar() {
    this._collapseSidebar.next(!this._collapseSidebar.value)
  }
}

组件调用调整 #

Header和业务组件的触发方法统一修改为：

collapseSidebar() {
  this.navServices.toggleSidebar()
}

侧边栏组件绑定调整 #

用async管道自动订阅状态，无需手动处理订阅和变更检测：

<div class="sidebar" [class.collapsed]="navServices.collapseSidebar$ | async">
  <!-- 侧边栏原有内容 -->
</div>

内容的提问来源于stack exchange，提问作者Gowsegan