在不使用RouterModule的情况下链接防护(canDeactivate)和组件

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { YourComponent } from './your-component.component';

@Injectable()
export class YourCanDeactivateGuard implements CanDeactivate<YourComponent> {
  canDeactivate(component: YourComponent): boolean {
    // 执行逻辑判断，返回true或false
    return component.canDeactivate();
  }
}

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

@Component({
  selector: 'app-your-component',
  template: `
    <!-- 组件模板 -->
  `,
})
export class YourComponent {
  canDeactivate(): boolean {
    // 执行逻辑判断，返回true或false
    return confirm('确定要离开吗？');
  }
}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { YourComponent } from './your-component.component';
import { YourCanDeactivateGuard } from './your-can-deactivate.guard';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}