Angular

Angular 預先載入資料Resolve

切入頁面要等一下資料才會出來會造成使用者體驗不佳的問題使用 Resolve 預先載入資料

產生resolve的指令

1
ng g c ToDoResolve

放置到src/app/@resolve

  • constructor 依賴注入TodoApiService
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { TodoApiService } from './../@services/todo-api.service';
+ import { TodoService } from './../@services/todo.service';
import { Injectable } from '@angular/core';
import {
+  Router, Resolve,
+  RouterStateSnapshot,
+  ActivatedRouteSnapshot
} from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { addListsType } from '../Types/toDo';

+@Injectable({
 + providedIn: 'root'
+})

+export class TodoResolver implements Resolve<addListsType[]> {

+   constructor(
+     private todoApiService: TodoApiService, 
+     private todoService: TodoService
    ) 
    { }

+ resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<addListsType[]> {
+    return this.todoApiService.取得資料();
+  }
}

該路由設定

1
2
3
4
5
6
const routes: Routes = [
    {
         path: "page", loadComponent: () => import('./page-pra/page-pra.component').then((m) => m.PagePraComponent),
      +  resolve: { todoDataList: TodoResolver }
    }
]

PagePraComponent頁面使用

1
2
3
4
5
6
7
8
constructor(
    private service: TodoService,
+    private route: ActivatedRoute
  ) { }

  ngOnInit() {
 +    this.service.todoDataList = this.route.snapshot.data['todoDataList']
  }

Resolve 預先載入資料參考資料github
Resolve 預先載入資料參考資料