說明

調用 resolve service 先把資料處理完成 ，再用 private route: ActivatedRoute 給 component 調用

order-routing.module.ts

resolve 放在 children 層 取不到 resolve 的內容

const routes: Routes = [
  {
    path: '', component: OrderComponent,
    resolve: {
      letter: OrderResolver
    },
    children: [
      {
        path: '',
        component: OrderComponent,
      }
    ]
  }
];

order-resolver.service.ts

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable, of } from 'rxjs';
import { take } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class OrderResolver implements Resolve<any>{
  constructor() {
  }

  resolve(): Observable<any> {
    return of(['Hello World！', '123', '456']);
  }
}

component.ts

letter: string;
constructor( private route: ActivatedRoute ) {}
ngOnInit(): void {
  this.route.data.subscribe((data: any) => {
    this.letter = data.letter;
  });
  this.letter = this.route.snapshot.data.letter;
}

component.html

<span>路由取得 letter 值：{{letter}}</span>

參考來源

https://blog.kevinyang.net/2016/12/11/ng2-router-resolve/