Angular resolve

今回はAngularのresolveについて書きます。
プログラミング初心者がプログラミング初心者に当てて書く記事です。
必死にコードに齧り付いているプログミング初心者に届くと幸いです。
一緒に齧り付いていきましょう。

resolveとは。

interface Resolve<T> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T
}

一言で言うと『ルートがアクティブになる前にデータを用意してくれるインターフェース』です。
つまり、ルートがアクティブになる前にstateのActivatedRouteSnapshotの中のデータの読み込みが完了していることを確認してから、routeのActivatedRouteSnapshotのルートの表示を行う。

実際の使い方
1.resolveを使った関数を定義。

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';

import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class NewsResolver implements Resolve<Observable<string>> {
  resolve(): Observable<string> {
    return of('Route!').pipe(delay(2000));
  }
}

ここでNewsResolverというresolveを作りました。
内容は２０００ms読み込みを遅らせてから”Route!”という文字列を返すものです！

2.先ほど作ったresolveを新しく作るrouteモジュールに入れます。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { NewsResolver } from './news.resolver';

import { TopComponent } from './top/top.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent
  },
  {
    path: 'top',
    component: TopComponent,
    resolve: { message: NewsResolver }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

これでRoutesが起動するたびに、NewsResolverが起動して、messageに”Route!”が代入されるようになります。
そして、これはこのルーターがアクティブになった時、ActivatedRouteの要素dataにMessage：NewsResolverを入れることにもなる。
ActivatedRouteの中にはアクティブになっているルートのさまざまな情報が自動で格納される。

//ActivatedRoute.snapshotの中身
　data{
 message:NewsResolver
}

3."Route"を表示する。

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class TopComponent implements OnInit {
  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.data = this.route.snapshot.data;
  }
}

ここではTopComponentのthis.dataにActivatedRoute.route.snapshot.data『message』の中身を入れる。

この状態でルートTopの中にHTMLでdata.messsageを書くと"Route!"が表記される！！

<p>The message: {{ data.message }}</p>

参考もと
https://www.digitalocean.com/community/tutorials/angular-route-resolvers