12.10.4 - CanDeactivate

• 检查用户是否可以退出路由。比如用户在表单中输入的内容没有保存，用户又要离开路由，此时可以调用该守卫提示用户 ```typescript import { Injectable } from ‘@angular/core’; import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree } from ‘@angular/router’; import { Observable } from ‘rxjs’;

// 定义一个接口，canLeave 可以没有参数，但是一定要有一个返回值 export interface CanLeave { canLeave: () => boolean }

@Injectable({ providedIn: ‘root’ })

// 换成了 export class AnsaveGuard implements CanDeactivate { canDeactivate( component: CanLeave, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { if (component.canLeave()) { return true } return false } }

```typescript
// home.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { CanLeave } from 'src/app/guards/ansave.guard';
@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, CanLeave {
    myForm: FormGroup = new FormGroup({
        username: new FormControl()
    })
    // canLeave 是 ansave.guard.ts 中定义的方法
    canLeave(): boolean {
        // dirty 是 true 表示用户修改这个表单
        if (this.myForm.dirty) {
            if (window.confirm("有数据未保存, 确定要离开吗")) {
                return true
            } else {
                return false
            }
        }
        return true
    }
    constructor() { }
    ngOnInit(): void { }
}

// home.component.html
<form [formGroup]="myForm">
    <input type="text" formControlName="username">
</form>

// app-routing.module.ts
{
    path: "home",
    component: HomeComponent,
    canDeactivate: [AnsaveGuard]
},