在Angular中，守卫用于在导航到某个路由之前执行一些逻辑。如果守卫返回false，则导航将被取消。

要在页面更改后取消订阅，可以使用Angular的生命周期钩子函数来处理。在组件的ngOnDestroy方法中取消订阅。

下面是一个示例，演示如何使用守卫和订阅的取消：

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable, Subscription } from 'rxjs';

@Injectable()
export class UnsavedChangesGuard implements CanDeactivate {
  canDeactivate(component: ComponentWithSubscription): Observable | boolean {
    // 检查订阅是否取消
    if (component.subscription && !component.subscription.closed) {
      // 确认是否要离开页面
      return confirm('您有未保存的更改。您确定要离开吗？');
    }
    return true;
  }
}

export class ComponentWithSubscription {
  subscription: Subscription;

  ngOnInit() {
    // 订阅
    this.subscription = observable.subscribe(...);
  }

  ngOnDestroy() {
    // 取消订阅
    if (this.subscription && !this.subscription.closed) {
      this.subscription.unsubscribe();
    }
  }
}

在上面的代码示例中，我们定义了一个UnsavedChangesGuard守卫，它实现了CanDeactivate接口。在canDeactivate方法中，我们检查组件中的订阅是否存在且未取消。如果订阅存在且未取消，我们会提示用户是否要离开页面。

在ComponentWithSubscription组件中，我们在ngOnInit方法中订阅了一个Observable，然后在ngOnDestroy方法中取消订阅。这样做可以确保在页面销毁之前取消订阅。

要在路由模块中使用守卫，需要将UnsavedChangesGuard添加到路由配置中。例如：

const routes: Routes = [
  {
    path: 'example',
    component: ExampleComponent,
    canDeactivate: [UnsavedChangesGuard]
  }
];

这样，当用户尝试离开ExampleComponent组件时，会触发UnsavedChangesGuard守卫并执行canDeactivate方法中的逻辑。