Yes, subscribe to the route change, and then operate

CanDeactivate

import { CanDeactivate } from '@angular/router';
import { ProductComponent } from '../product/product.compnent';

export class UnsavedGuard implements CanDeavtivate<ProductComponent>{
    canDeavtivate(componnet: ProductComponent){
        return window.confirm("");
    }
}

// route.module.ts
import { UnsavedGuard } from './xx/unsaved.guard';

const routes: Routes = [
    
    { path: 'product', component: ProductComponent, canDeactivate:[UnsavedGuard] }
]
@NgModule({
    provider: [UnsavedGuard]
}) 

that's about it. You can see it on the official website. There are also cases
ide/router-sharpemcandeactivateem-handling-unsaved-changes" rel=" nofollow noreferrer "> https://angular.cn/guide/rout.