我可以在 Angular Guards 中使用生命周期钩子吗？

Question

我正在研究 angular。在我的项目中，在第一页加载时加载数据的操作是由守卫调度的。我需要修改守卫才能访问商店。我在构造函数中订阅商店并访问我想要的任何数据。我在哪里可以取消订阅商店？我可以使用 ngOnDestroy 吗？

这是我的代码

import { Observable, Subject } from 'rxjs';
import { Store, Action, State } from '@ngrx/store';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { Router, Resolve, ActivatedRouteSnapshot, CanActivate } from '@angular/router';
import * as UpdateStore from '../store';
import { SetEntityType, LoadEntityList1 } from '../store/actions/Update.actions';
import { takeUntil } from 'rxjs/operators';

@Injectable()
export class EntityListingGuard implements CanActivate {
  Framework: any;
  Status: any;
  Type: any;
  destroyStore$ = new Subject();

  constructor(
    private store: Store<UpdateStore.State>,
    private actions$: Actions,
    private router: Router
  ) {
    this.store.pipe(
      takeUntil(this.destroyStore$)
    ).subscribe((state) => {
      this.Framework = state.SelectedFilters['frameworksChecked'] ? state.SelectedFilters['frameworksChecked'] : [];
      this.Type = state.SelectedFilters['typeChecked'] ? state.SelectedFilters['typeChecked'] : [];
      this.Status = state.SelectedFilters['statusChecked'] ? state.SelectedFilters['statusChecked'] : [];
    });
  }

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const entityType = route.params['entityType'];
    const releaseId = route.params['releaseId'];
    const noOfUpdates = route.params['noOfUpdates'];

    const payload = {
      'searchTerm': '', pageLimit: 50, 'entityType': entityType, 'releaseId': releaseId, noOfUpdates: noOfUpdates,
      'checkedJobFrameworks': this.Framework 'checkedJobStatus': this.Type 'checkedJobType': this.Type  
    };

    this.store.dispatch(SetEntityType({ entityType: entityType }));
    this.store.dispatch(LoadEntityList1({ payload: payload }));

    const responseOK = this.actions$.pipe(ofType(UpdateActions.LoadEntityList1Success));
    const responseERROR = this.actions$.pipe(ofType(UpdateActions.globalError));
    return Observable.race(responseOK, responseERROR).take(1)
      .map(action => {
        if (action['type'] === '[Layout] Global Error') {
          return false;
        } else {
          return true;
        }
      }).first();
  }
}

Answer 1

守卫不是组件，所以它们没有钩子。一种方法是获取数据并立即取消订阅，就像您对 race 和 take(1) 所做的那样。

此外，查看您的代码，在获取状态后使用 reducer 存在逻辑混淆。 Reducer 旨在 reduce 数据到 store。请考虑深入了解 Flux/Redux 模式。

其次 "also"，存储是异步的，你的警卫可能无法预测 - 考虑将你需要的内容 canActive 和 return 结果作为可观察的。

我可以在 Angular Guards 中使用生命周期钩子吗？

Can I use lifecycle hooks in Angular Guards?

rxjs

angular

angular-router

angular8