在Angular中，可以使用CanDeactivate接口来实现取消导航行为。下面是一个具体的解决方法，包含代码示例：

首先，定义一个CanDeactivateGuard守卫类，实现CanDeactivate接口：

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

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

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

接下来，在需要应用该守卫的路由上使用canDeactivate属性，指定需要调用的守卫类：

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

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

在ExampleComponent组件中，实现CanComponentDeactivate接口，定义canDeactivate方法来处理取消导航的逻辑：

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

export class ExampleComponent implements CanComponentDeactivate {
  // ...

  canDeactivate(): Observable | Promise | boolean {
    if (this.form.dirty) { // 如果表单有修改
      return confirm('您的修改尚未保存，确定要离开吗？');
    }
    return true; // 如果表单没有修改，直接允许离开
  }
}

上述代码中，canDeactivate方法返回一个Observable、Promise或boolean类型的值，用于确定是否允许离开当前路由。在示例中，如果表单有修改，则弹出确认对话框询问用户是否确定离开，否则直接允许离开。

请注意，此示例假设ExampleComponent组件有一个名为form的表单属性。根据实际情况，你需要根据你的需求来修改表单的判断逻辑。

最后，将CanDeactivateGuard添加到app.module.ts中的providers数组中：

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

@NgModule({
  // ...
  providers: [CanDeactivateGuard],
  // ...
})
export class AppModule { }

这样，当用户尝试离开带有canDeactivate守卫的路由时，会调用ExampleComponent的canDeactivate方法进行判断，根据返回值来决定是否允许离开。