Question

我正在开发具有以下模块结构的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')
  }

}

Answer 1

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

更多信息，Sharing data between modules is peanuts

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

1 个答案: