Angular/NgRx -在守卫中组合2个选择器

Angular是一种流行的前端开发框架，NgRx是Angular的一个状态管理库。在守卫中组合2个选择器是指在Angular中使用NgRx的守卫来组合两个选择器。

守卫（Guard）是Angular中的一种机制，用于在导航到某个路由之前进行一些预处理操作，例如权限验证、登录状态检查等。守卫可以通过选择器来确定是否应该执行某个操作。

选择器（Selector）是NgRx中的概念，用于从应用的状态树中选择特定的数据。选择器可以根据一些条件从状态树中提取出所需的数据。

在守卫中组合2个选择器意味着我们可以在守卫中同时使用两个选择器来进行条件判断。这样可以更灵活地根据状态树中的数据来决定是否允许导航到某个路由。

以下是一个示例代码，演示了如何在守卫中组合2个选择器：

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { AppState } from '../store/app.state';
import { isLoggedInSelector, isAdminSelector } from '../store/auth.selectors';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private store: Store<AppState>) {}

  canActivate(): Observable<boolean> {
    return this.store.pipe(
      select(isLoggedInSelector), // 第一个选择器：检查用户是否已登录
      map(isLoggedIn => {
        if (!isLoggedIn) {
          // 用户未登录，禁止导航
          return false;
        }

        return true;
      }),
      select(isAdminSelector), // 第二个选择器：检查用户是否是管理员
      map(isAdmin => {
        if (!isAdmin) {
          // 用户不是管理员，禁止导航
          return false;
        }

        return true;
      })
    );
  }
}

在上述示例中，我们使用了isLoggedInSelector和isAdminSelector两个选择器来判断用户是否已登录和是否是管理员。如果用户未登录或不是管理员，则禁止导航。

对于NgRx的选择器，可以使用createSelector函数来创建。关于NgRx的更多信息和使用方法，可以参考腾讯云的相关文档和教程：