angular - 父组件中服务器的初始状态

Question

我正在检查ngrx 示例应用程序并试图找出一种在查找页面 ( http://localhost:4200/#/books/find ) 上初始化状态的好方法。

似乎我应该能够将其添加到 AppComponent

ngOnInit() { 
    this.store.dispatch(new book.Search('Michael Jordan')); 
}

但这并没有填充商店中的商店，FindBookPageComponent 似乎它在连锁店中发生得太早了。想知道是否有人可以解释这一点并提供更好的方法。

注意：将 ngOnInit 添加到FindBookPageComponent作品中，但每次用户导航返回时都会调用它。如果有意义的话，我希望这更像是一个初始状态。

谢谢！

Answer 1

最好把它放在路由器保护中 => canActivate()

检查数据是否存在；否则分派负载数据

canActivate(): Observable<boolean> {
  return this.checkStore().pipe(
    switchMap(() => of(true)),
    catchError((error) => of(false))
    );
}

checkStore(): Observable<boolean> {
  return this.store.select(fromStore.getDataLoaded).pipe(
    tap(loaded => {
      if (!loaded) {
        this.store.dispatch(new fromStore.LoadDataCollection());
      }
    }),
    filter(loaded => loaded),
    take(1)
    );
}