Angular导航守卫是一种用于控制路由导航的机制，它可以帮助我们在用户导航到新页面之前执行一些操作或进行一些验证。

下面是一个使用Angular导航守卫进行导航提示的示例代码：

1. 创建一个名为canDeactivateGuard.ts的文件，定义一个实现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) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

2. 在需要应用导航提示的组件中实现CanComponentDeactivate接口，并添加canDeactivate()方法来返回一个Observable。

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

import { CanComponentDeactivate } from './canDeactivateGuard';

@Component({
  selector: 'app-your-component',
  template: `
    
Your Component
    Navigate to Another Page
  `
})
export class YourComponent implements CanComponentDeactivate {
  canDeactivate(): Observable {
    // Add your navigation prompt logic here
    // Return an Observable indicating whether the user can navigate away from the component
    // For example:
    return new Observable((observer) => {
      const result = window.confirm('Are you sure you want to navigate away?');
      observer.next(result);
      observer.complete();
    });
  }

  navigateToAnotherPage() {
    // Navigate to another page
  }
}

3. 在你的路由配置文件中使用canDeactivate属性来应用导航守卫。

import { Routes } from '@angular/router';
import { YourComponent } from './your-component.component';
import { CanDeactivateGuard } from './canDeactivateGuard';

const routes: Routes = [
  {
    path: 'your-component',
    component: YourComponent,
    canDeactivate: [CanDeactivateGuard]
  }
];

export const AppRoutingModule = RouterModule.forRoot(routes);

现在，当用户尝试导航离开YourComponent组件时，将会显示一个提示框询问用户是否确定要离开。用户可以选择“确定”或“取消”来继续或取消导航。