等待ngrx状态填充在异步路由防护中

Question

我的路线保护员需要等待状态填充，但我只获得第一个值，当然，null

export class Guard implements CanActivate {

  constructor(
    private router: Router,
    private store: Store<AppState>,
  ) {}

  canActivate(): Observable<boolean> {
    return this.store.select<MyState>('mystate').map(state => {
      if (state && state.thing) {
        this.router.navigate(['/path']);
        return true;
      }
    });
  }

}

如何强制守卫等待填充状态？

[更新1]

如果我使用.skipWhile()模式：

return this.store
           .select<MyState>('mystate')
           .skipWhile(mystate => {
             if (mystate && mystate.thing) {
               return false;
             }

             console.log('here');

             return true; // <- shouldn't this cause it to keep going?
           })
           .do(mystate => {
             if (mystate.thing.condition) {
               this.router.navigate(['/path']);
             }
           })
           .mapTo(true);

永远不会评估

.do(...)，'here'只会记录一次。我错过了什么？

[更新2]

缺少的是调用.dispatch()首先加载我的州。我有一个嵌套的模块结构，这个守卫放在的容器组件是.dispatch()所在的地方。当然，警卫阻止了组件的初始化，因此我的状态从未填充过。

Answer 1

您可以使用skipWhile运算符跳过null值。这样，流只会在填充状态时发出。

return this.store.select<MyState>('mystate')
  .skipWhile(state => !state || !state.thing)
  // at this point, you're guaranteed that `state` is populated
  .do(() => this.router.navigate(['/path']))
  .mapTo(true);

这是一个JSBIN：http://jsbin.com/lupicepoyo/1/edit?js,console