在CanDeactivate中处理可观察对象

import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

import { CanDeactivateGuard } from './can-deactivate.guard';

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

import { CanComponentDeactivate } from './can-deactivate.guard';
import { Observable } from 'rxjs';

export class ExampleComponent implements CanComponentDeactivate {
  // ...

  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    // 处理可观察对象的逻辑，例如确认是否保存修改
    // 返回Observable<boolean>、Promise<boolean>或boolean
  }
}