导航后 Angular2 存储丢失数据

Question

我有一个用 TS 编写的 Angular2 应用程序，它使用 Ionic 进行状态和页面路由。

大致布局如下； type.component.html 是 type.component.ts 的视图，它导入商店 type.store.ts，扩展 class base.store.ts

我正在尝试将商店作为单例注入到我的应用程序中，因为它只是类型上的数据库 CRUD 操作，并没有太大的意义，并且相同的数据集将出现在多个组件中。

显示缺陷的 Plunkr（仅查看商店，使用左上角后退按钮返回，再次查看商店...数据丢失）。 http://embed.plnkr.co/M5FO3CKQsvOSacTbkgdV/

bug在这里，如果我；

导航到页面，base.store和type.store的构造函数被调用，数据被初始化，并显示在屏幕上。
我可以 add/edit/delete 闲暇时，数据库和组件视图都按照我的预期完美更新。
我什至可以转到另一个组件，使用扩展相同 base.store（也相同）的不同商店进行相同定义。同样的行为，它出现了，我可以与之互动。
不过；一旦我离开另一个页面，然后返回同一页面，数据集为空或未显示在页面上；并且构造函数或加载事件未触发。

我在想这可能与我的商店继承设置方式有关，否则我不确定。

相关代码：

component.html

<ion-item *ngFor="let type of types$ | async">
  {{type.name}}
</ion-item>

component.ts

@Component({
  templateUrl: 'build/components/types.component.html'
})
export class TypesComponent {    
  private types$: Observable<Array<Type>>;    
  constructor(private navController: NavController, private typeStore: LiftTypeStore) {
    this.types$ = this.typeStore.types$; }}

store.ts

@Injectable()
export class TypeStore extends BaseStore {

  protected _subject$: Subject<Array<Type>>;
  options;

  constructor(protected http: Http, protected configService: ConfigService) {
    super(http, configService);

    this.options = {
      collection: "types",
      model: "Type",
      route: "types"
    };
    this.init(this.options);
  }

  get types$() {
    return this._subject$.asObservable();
  }

base.store.ts

export class BaseStore {

  protected options: {
    collection: string,
    model: string,
    route: string
  };
  protected _subject$: Subject<Array<any>>;
  protected dataStore: {};

  constructor(protected http: Http, protected configService: ConfigService) {
  }
  init(options) {
    this.options = options;
    this.dataStore = {};
    this.dataStore[options.collection] = [];
    this._subject$ = <Subject<Array<any>>>new Subject();
    this.load();
  }

  load() {
    this.http.get(this.configService.getBaseUrl() + this.options.route).map(response => response.json()).subscribe(
      data => {
        console.log("base store load");
        this.dataStore[this.options.collection] = data;
        this._subject$.next(this.dataStore[this.options.collection]);
      },
      error => console.log('Could not load', this.options.collection));
  }

并在 app.ts

ionicBootstrap(MyApp, [ConfigService, TypeStore, LogStore]);

Answer 1

好吧，修复了...

事实证明，在 bootstrap 期间在整个应用商店应用程序中注入导致了这个问题。一旦我从那里删除并作为提供者添加到组件构造函数中的 [providers]，一切都完美无缺。

我不确定为什么会发生这种情况，因为唯一的区别应该是商店被实例化一次，然后传递给任何想要它的人。现在每次组件创建时都会创建它。但是，缺陷已解决...

导航后 Angular2 存储丢失数据

Angular2 store losing data after navigation

typescript

ionic2

angular