NgRx场景下Angular组件属性变更监听及路由控制问题

我在第一个组件（导航侧边栏组件NavSidebarComponent）里定义了属性：

linkEnabled: boolean = false;

当该属性为false时，用户无法访问特定路由，HTML里的配置如下：

<a class="nav-link" [routerLink]="linkEnabled ? ['/libraries']: null" [routerLinkActive]="linkEnabled ? 'active-route' : 'is-disabled'">

这个属性默认是false，只有用户在第二个组件中选择项目后，才会被设为true。

在第二个组件中，我导入并注入了第一个组件：

import { NavSidebarComponent } from '../nav-sidebar/nav-sidebar.component';

constructor(private store: Store<AppState>,
            // ...其他依赖项
            private navSidebarComponent: NavSidebarComponent
            ) { }

接着在ngOnInit里监听NgRx Store中的当前项目名称，当项目名称不为空时修改第一个组件的属性：

this.projectNameSub = this.store.pipe(select(ProjectSelectors.selectCurrentProjectName))
  .subscribe(projectName => {
    this.projectName = projectName;
    if(this.projectName !=null) {
      this.navSidebarComponent.linkEnabled = true;
    }
  });

现在遇到的问题是：第一个组件无法感知到linkEnabled的变更，始终认为它是false。我试过在第一个组件里创建方法并订阅，但会导致页面一加载linkEnabled就变成true，不符合需求，想知道怎么让第一个组件在ngOnInit里监听该属性的变化？

方案1：第一个组件直接订阅NgRx Store（推荐） #

既然已经用NgRx管理项目名称的状态，最合理的做法是让NavSidebarComponent自己从Store里获取状态，不需要通过第二个组件传递，这样能避免组件间直接耦合的问题，也能保证变更被正确检测到。

修改第一个组件的代码：

import { Store } from '@ngrx/store';
import { ProjectSelectors } from 'path-to-your-selectors';
import { AppState } from 'path-to-your-app-state';
import { Subscription } from 'rxjs';

export class NavSidebarComponent implements OnInit, OnDestroy {
  linkEnabled: boolean = false;
  private projectNameSub!: Subscription;

  constructor(private store: Store<AppState>) {}

  ngOnInit(): void {
    // 直接订阅Store中的项目名称状态
    this.projectNameSub = this.store.pipe(
      select(ProjectSelectors.selectCurrentProjectName)
    ).subscribe(projectName => {
      // 根据项目名称是否存在设置linkEnabled
      this.linkEnabled = !!projectName;
    });
  }

  ngOnDestroy(): void {
    // 销毁订阅，避免内存泄漏
    this.projectNameSub?.unsubscribe();
  }
}

这样组件会自动响应Store中项目名称的变化，不需要依赖其他组件调用，变更检测也能正常触发，HTML里的绑定会自动更新。

方案2：用BehaviorSubject实现组件间通信（若不想直接用Store） #

如果因为某些原因不想让第一个组件直接订阅Store，可以在共享服务里用BehaviorSubject传递状态，让两个组件都通过服务获取和更新状态。

1. 创建共享服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RouteAccessService {
  private linkEnabledSubject = new BehaviorSubject<boolean>(false);
  linkEnabled$: Observable<boolean> = this.linkEnabledSubject.asObservable();

  setLinkEnabled(enabled: boolean): void {
    this.linkEnabledSubject.next(enabled);
  }
}

2. 修改第二个组件，通过服务更新状态：

import { RouteAccessService } from 'path-to-your-service';
import { Subscription } from 'rxjs';

export class YourSecondComponent implements OnInit, OnDestroy {
  projectName: string | null = null;
  private projectNameSub!: Subscription;

  constructor(private store: Store<AppState>,
              private routeAccessService: RouteAccessService
              ) { }

  ngOnInit(): void {
    this.projectNameSub = this.store.pipe(select(ProjectSelectors.selectCurrentProjectName))
      .subscribe(projectName => {
        this.projectName = projectName;
        this.routeAccessService.setLinkEnabled(!!projectName);
      });
  }

  ngOnDestroy(): void {
    this.projectNameSub?.unsubscribe();
  }
}

3. 修改第一个组件，订阅服务的状态：

import { RouteAccessService } from 'path-to-your-service';
import { Subscription } from 'rxjs';

export class NavSidebarComponent implements OnInit, OnDestroy {
  linkEnabled: boolean = false;
  private linkEnabledSub!: Subscription;

  constructor(private routeAccessService: RouteAccessService) {}

  ngOnInit(): void {
    this.linkEnabledSub = this.routeAccessService.linkEnabled$
      .subscribe(enabled => {
        this.linkEnabled = enabled;
      });
  }

  ngOnDestroy(): void {
    this.linkEnabledSub?.unsubscribe();
  }
}

原方式失效的原因 #

你直接注入NavSidebarComponent并修改属性的方式有两个问题：

1. Angular中组件实例的注入可能不是你预期的那个（比如组件被多次实例化，或不在同一注入树中）；
2. 直接修改组件属性可能不会触发Angular的变更检测，导致视图无法更新。

而通过Store或RxJS的Subject传递状态，能保证变更被正确通知到组件，并且触发变更检测更新视图。

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