如何取消订阅此订阅？

Question

我有一个 PolicyGuard 和一个方法 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)。

在 canActivate 中，我创建了一个 observable，并在这个 observable 内部订阅了一个从 AbilityService 检索到的 Observable。

我从 AbilityService 检索到的 observable 监听用户“策略”/“能力”的变化。

当我对用户的“策略”进行更改并使用 Socket.io 将这些更改推送到客户端时，这会变得非常混乱，因为当我不希望它发生时，可能会发生页面重定向到主页（一个订阅运行obs.next(true)，而另一个订阅路由回家并运行obs.next(false))

有没有一种方法可以让我在离开订阅的页面时取消订阅？

@Injectable()
export class PolicyGuard implements CanActivate {

    constructor(protected router: Router, private abilityService: AbilityService) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        console.log("PolicyGuard() - canActivate()");

        return new Observable<boolean>(obs => {
            const observable = this.abilityService.getAbility();
            observable.subscribe(ability => {
                const can = ability.can(route.data.action, route.data.subject);

                if (can) {
                    obs.next(true);
                }
                else {
                    this.router.navigate(['/home']);
                    obs.next(false);
                }
            });
        });
    }
}

Answer 1

您当前创建了一个额外的 Observable，我认为这不是必需的。您可以简单地返回 this.abilityService.getAbility() 并使用 RxJS map 运算符转换返回值。这样 Angular 就会接管并处理来自 Observable 的订阅。

看起来像这样：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  console.log("PolicyGuard() - canActivate()");

  return this.abilityService.getAbility().pipe(
    map(ability => {
      const can = ability.can(route.data.action, route.data.subject);
     
      if (!can) {
        this.router.navigate(['/home']);
      }
      return can;
    });
  );
}

angular.io 上的 canActivate 示例做了类似的事情，只是没有 map 运算符。