两个组件之间的路由从 NGRX 存储中删除订阅

Question

我的应用程序中有两个页面Dashboard 和Transactions 以及一个控制导航的Sidebar 组件。

当我第一次从Dashboard 导航到Transactions 时，我订阅了商店中的用户状态。一切都按预期工作，我获取了用户 ID 并将其注入到子组件中以使用。

export class TransactionsComponent implements OnInit {
  userID;

  constructor(private store: Store<AppState>, private spinner: NgxSpinnerService) {}

  ngOnInit() {
    this.spinner.show();
    this.store.select('user').subscribe(
      user => { if (user) { this.userID = user.uid; } }
    );
  }
}

当我导航回Dashboard 页面，然后返回Transactions 页面时，我遇到了用户ID 永远无法解析和无休止的加载微调器。

在我的Sidebar 中，从交易页面导航到仪表板时，此订阅会消失。

export class SidebarComponent implements OnInit {
  user$: Observable<User>;

  constructor(public auth: AuthService, private store: Store<AppState>) {}

  ngOnInit(): void {
    this.user$ = this.store.select('user');
    this.store.dispatch(new userActions.GetUser());
  }
}

这是我将检索用户 ID 的效果

  @Effect()
  getUser: Observable<Action> = this.actions.pipe(
    ofType(userActions.GET_USER),
    map((action: userActions.GetUser) => action.payload ),
    switchMap(payload => this.afAuth.authState),
    delay(2000), // delay to show loading spinner can be deleted
    map( authData => {
        if (authData) {
          // User logged in
          const user = new User(authData.uid, authData.displayName);
          return new userActions.Authenticated(user);
        } else {
          return new userActions.NotAuthenticated();
        }
    }),
    catchError(err => of(new userActions.AuthError()) )
  );

我希望Transactions 组件能够保持用户 ID 的状态，并且在我返回时不需要加载微调器。

Answer 1

您在 SidebarComponent 和 user$ 中拥有正确的代码 - 只需创建一个 Observable 而不是 subscription。

在TransactionsComponent 中您需要使用相同的模式，是否有理由将用户userID 保留为独立属性？

我会建议你下一个方法。

export class TransactionsComponent implements OnInit {
  userId$;

  constructor(private store: Store<AppState>, private spinner: NgxSpinnerService) {}

  ngOnInit() {
    this.userId = this.store.select('user').pipe(
      tap(user => {
        if (user) { // we've got a use, the data has been loaded
          this.spinner.hide();
        } else {
          this.spinner.show(); // no user - looks like the loading is in progress
        }
      }),
      map(user => user ? user.uid : undefined),
      filter(userId => userId !== undefined), // <- comment in case userId isn't required.
    );
  }
}

然后在它的模板中

<ng-container *ngIf="userId$ | async as userId">
   <child-component [userId]="userId"></child-component>
</ng-container>