12.10.5 - Resolve

• 允许在进入路由之前先获取数据，待数据获取完成之后再进入路由
• ng g resolver ```typescript // get-name.resolver.ts import { Injectable } from ‘@angular/core’; import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from ‘@angular/router’; import { Observable, of } from ‘rxjs’;

@Injectable({ providedIn: ‘root’ })

// Resolve 改成了 Resolve export class GetNameResolver implements Resolve { // Observable 换成 Promise resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise { return new Promise((resolve, reject) => { setTimeout(() => { resolve(“张三”) }, 2000) }) } }

```typescript
// home.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
    selector: 'app-views',
    templateUrl: './views.component.html',
    styleUrls: ['./views.component.scss']
})
export class ViewsComponent implements OnInit {
    constructor(private route: ActivatedRoute) { }
    ngOnInit(): void {
        console.log(this.route.snapshot.data.name)
    }
}

// app-routing.module.ts
{
    path: "views",
    component: ViewsComponent,
    resolve: {
        name: GetNameResolver
    }
},