时间戳

首页 > 解决方案 > 当组件来自不同的模块时，NgRx Store 不会获取值 - Angular

angular - 当组件来自不同的模块时，NgRx Store 不会获取值 - Angular

问题描述

我正在开发一个具有以下模块结构的 Angular 应用程序。

app.module.ts在这个模块中，我还有两个名为home.module.ts和的模块admin.module.ts。

我在我的应用程序中使用 NgRx 进行状态管理。我想要做的是，当某个事件发生在 中的组件上时home.module.ts，那么这里调度的动作应该反映在app.module.ts甚至兄弟模块admin.module.ts中。动作分派在同一模块的两个组件之间完美运行（无论父子关系或子父关系），但在模块更改时却不行。

StoreModule已经包含在 中，我在其中app.module.ts导入了它，home.module.ts但仍然没有成功。

我需要关于这个问题的帮助，谢谢。

另外，请注意，商店在同一模块的组件中完美运行。即动作被分派，甚至其他组件同时监听它。

分派行动的组成部分 1

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store'
import { Test } from '../../../ngrx/models/test.model'
import * as TestActions from '../../../ngrx/actions/test.actions'

@Component({
  selector: 'app-add-test',
  templateUrl: './add-test.component.html',
  styleUrls: ['./add-test.component.css']
})
export class AddTestComponent implements OnInit {

  constructor(
    public store: Store<Test[]>
  ) { }

  ngOnInit() {
  }

  addDataToStore(){
    console.log("Action Dispatched... [Add Test]")
    const data = {
      name : "Adnan Khan",
      email : "adnan@khan.com"
    }
    this.store.dispatch(new TestActions.TestAdd(data))
  }

}

组件 2 显示数据

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs'
import { Store } from '@ngrx/store'
import { Test } from '../../../ngrx/models/test.model'

@Component({
  selector: 'app-show-test',
  templateUrl: './show-test.component.html',
  styleUrls: ['./show-test.component.css']
})
export class ShowTestComponent implements OnInit {

  constructor(
    public store: Store<Test>
  ) { }

  storeData: Observable<Test[]>

  ngOnInit() {
    this.storeData = this.store.select('test')
  }

}

标签： angularngrxngrx-store

解决方案

分派的操作将传递给每个注册的减速器。如果模块 A 调度了一个动作，模块 B 中的减速器将接收调度的动作。唯一的必要条件是模块 B 已加载。

在模块之间共享数据的更多信息是花生

推荐阅读