Question

建立一个angular5 app ...与vue或反应相比，这么多活动部件，但我坚持使用它。

利用角度延迟加载模块我生成每个页面角度作为模块。每个模块都有自己的封装存储，使用ngrx：

StoreModule.forFeature('home', HomeReducer),

到目前为止一直很好......我们可以轻松地将数据注入HomePages商店，模块看起来有点像这样：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';

import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';
import { HomeReducer } from '@modules/page/home/redux/home.reducers';
import { HomeEffects } from '@modules/page/home/redux/home.effects';
import { HomeService } from '@modules/page/home/home.service';

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule,
    HomeRoutingModule,
    StoreModule.forFeature('home', HomeReducer),
    EffectsModule.forFeature([HomeEffects])
  ],
  exports: [],
  providers: [
    HomeService
  ],
})

export class HomeModule {
}

该组件也非常简单，如下所示：

import { Component, OnInit } from '@angular/core';
import * as homeActions from './redux/home.actions';
import { Store } from '@ngrx/store';
import { HomeState } from '@modules/page/home/redux/home.state';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-home-component',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  cars: Observable<any>;

  constructor (private store: Store<HomeState>) {
    this.cars = this.store.select(homeActions.getCars);
  }

  ngOnInit () {
  }

  clickme () {
    // dispatch a fetch to the store. gallery of images.
    // todo add a propper type model
    const imageType: any = {
      type: 'cars'
    };

    this.store.dispatch(new homeActions.GalleryFetch(imageType));
  }
}

由效果监听的clickme函数调度和操作，这些操作依次触发对成功的http请求的另一个操作，最终将数据放入视图...

但现在显而易见的下一步......我需要与另一个页面共享此数据。立即想到两个问题

1 - 从另一个模块访问一个模块存储数据的最佳方法是什么？

2 - 如果需要与另一个模块共享，那么封装模块数据的重点是什么，例如，登录模块将始终需要共享用户数据..是仅使用此{{1对于真正只由模块使用的数据？

IMHO：将状态拆分为模块对于可重用代码块的最终实践是一种很好的意识形态。我的意思是编写一个自包含的模块，只需将其放入您的应用程序即可...但是应用程序几乎总是需要将数据从一个模块传递到下一个模块，并且当需要将这些模块发送到模块时会产生更多问题比它解决了。

Answer 1

您只需要将 HomeModule 导入另一个模块，这样家庭功能的存储和效果也将在该新模块中注册。之后，您需要在新模块组件的构造函数中定义主要功能的商店，您将能够像在 HomeModule 中那样使用它。 / p>

如何使用ngrx的StoreModule.forRoot（）和StoreModule.forFeature（）访问另一个模块存储

1 个答案: