监听 ngrx 中属性的变化答案

【问题标题】：Listening for change to property in ngrx监听 ngrx 中属性的变化
【发布时间】：2023-02-08 18:19:24
【问题描述】：

在我的第一个组件中，我设置了一个属性，如下所示：

  linkEnabled: boolean = false;

当它设置为 false 时，某些路由将无法被我在 html 文件中设置的用户访问，如下所示：

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

在选择项目之前，此设置为 false，这是在另一个组件中完成的

在第二个组件中，我像这样导入了第一个组件：

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

并将其添加到构造函数中：

   constructor(private store: Store<AppState>,
              ..........
              private navSidebarComponent: NavSidebarComponent
              ) { }

在设置项目的 ngOnit 中，当项目名称不为空时，我调用 linkEnabled 值并设置为 true：

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

我遇到的问题是，我不确定如何让第一个组件监听更改，以便它知道 linkEnabled 现在已设置为 true？目前它只是认为它是错误的，所以我知道我错过了一步，但我不确定是什么。有没有办法订阅该值，以便它可以在第一个组件的 ngOnInit 中监听它的变化？

我曾想过在第一个组件中创建一个这样的函数：

public activateRoutes(): Observable<boolean> { console.log("activate routes called"); return of(this.linkEnabled = true); }

然后在 ngOnit 中做类似的事情：

this.activateRoutes().subscribe((link) => { this.linkEnabled = link; })

然后在第二个组件的 ngOnit 中，而不是执行： this.navSidebarComponent.linkEnabled = true;

我会这样做：this.navSidebarComponent.activateRoutes();

然而，所有发生的事情是在页面加载时，linkEnabled 设置为 true 并且它根本不工作，因为我需要它

【问题讨论】：

标签： ngrx

【解决方案1】：

通过创建新的 action、reducer 和 selectors 文件将其存储在商店中解决了这个问题，然后可以执行以下操作：

this.routeEnabledSub = this.store.pipe(select(RouteSelectors.selectRouteEnabled))
.subscribe(routeEnabled => {
  this.routeEnabled = routeEnabled;
});

在第一个组件中

然后在第二个中，像这样更新它：

    if(this.projectName !=null) {
      this.store.dispatch(RouteActions.setRouteActive(
        { routeActive: true }));
    } else {
      this.store.dispatch(RouteActions.setRouteActive(
        { routeActive: false }));

并在 html 中检查是否像这样设置了 linkEnabled：

[routerLinkActive]="linkEnabled ? 'active-route' : 'is-disabled'"

【讨论】：