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

发布于10月18日

我有一个简单的Angular functional路由守卫，它从服务的Subject<boolean>属性中检索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>.

推荐答案

是的，您需要取消订阅或take(1)，以防止内存泄漏.

你也可以避免手动订阅，让ANGLE为你处理，直接返回Observable！

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

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

因为Subject已经包含boolean，所以我们可以返回它的值，并且只处理它是false的情况.