如何在 Angular 功能性路由防护中取消订阅 RxJs 主题

Question

我有一个简单的 Angular 功能 路由防护，它从服务上的

boolean

属性检索

Subject<boolean>

值。守卫似乎按预期工作，看起来像这样：

export const isConfigValidGuard = () => {
  const configService = inject(ConfigService);
  const notificationService = inject(NotificationService);
  const router = inject(Router);

  configService.configValidation$.subscribe({
    next: (isValid) => {
      if (isValid) {
        return true;
      } else {
        notificationService.warn('invalid config, redirecting to home');
        return router.parseUrl('/home');
      }
    }
  });
};

我的问题是我是否需要取消订阅

configService.configValidation$

，如果需要，如何取消。同样，

configService.configValidation$

的类型是

Subject<boolean>

。

Answer 1

是的，您需要取消订阅或

take(1)

以防止内存泄漏。

您还可以避免手动订阅，并让 Angular 直接返回

Observable

！

来为您处理。

export const isConfigValidGuard = () => {
  const configService = inject(ConfigService);
  const notificationService = inject(NotificationService);
  const router = inject(Router);

  configService.configValidation$.pipe(
    map((isValid) => {
      if (!isValid) {
        notificationService.warn('invalid config, redirecting to home');
        return router.parseUrl('/home');
      }
    })
  );
};

由于

Subject

已经包含了

boolean

，我们可以返回它的值，并且只处理它是

false

的情况