Angular Resolver

Q: Angular Resolver là gì?

A: Angular Resolver cho phép tải trước data cho một route trước khi chuyển đến route đó. Nó thực chất là 1 đoạn code xen giữa việc user click vào url và việc load component tương ứng.

Q: Tại sao dùng Angular Resolver?

A: Để tăng trải nghiệm người dùng cho một số trường hợp nhất định, chẳng hạn việc loading component như thế nào phụ thuộc vào data trả về cho component đó, do vậy cần load data trước khi component sẵn sàng.

Q: Cấu hình Resolver như thế nào?

A: Cần phải tạo 1 class để implement Resolve interface như dưới đây:

export interface Resolve<T> {
  resolve(
   route: ActivatedRouteSnapshot, 
   state: RouterStateSnapshot
  ): Observable<T> | Promise<T> | T {
    return 'Data resolved here...'
 }
}

Như vậy hàm resolve nhận 2 tham số là route và state, trả về data dưới dạng Observable, Promise, hoặc Custom Type.

Q: Có thể lấy một ví dụ thực tế không?

A: Ví dụ đơn giản dưới đây dùng resolver cho route /products.

Step 1: Tạo 1 service get product data

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { Product } from '../../interfaces/product';
 
@Injectable({
  providedIn: 'root'
})
export class ProductService {
  url = 'https://fakestoreapi.com/products?limit=6';
  constructor(public http: HttpClient) {}
 
  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.url);
  }
}

Step 2: Tạo 1 service implement Resolve interface

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
import { Observable } from 'rxjs';
import { ProductService } from '../product/product.service';
 
@Injectable({
  providedIn: 'root'
})
export class ProductsResolverService implements Resolve<any> {
  constructor(private product: ProductService) {}
  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    return this.product.getProducts();
  }
}

Step 3: cấu hình routing

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductsComponent } from './components/products/products.component';
import { ProductsResolverService } from './services/productsResolver/products-resolver.service';
 
const routes: Routes = [
  {
    path: 'products',
    component: ProductsComponent,
    resolve: { products: ProductsResolverService }
  },
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Step 4: Truy cập data từ resolver trong products component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Product } from '../../interfaces/product';
 
@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  products: Product[];
 
  constructor(private activatedRoute: ActivatedRoute) {}
 
  ngOnInit(): void {
    this.activatedRoute.data.subscribe((response: any) => {
      this.products = response.products;
    });
  }
}

The End

Bài gốc: https://www.bacancytechnology.com/blog/angular-resolver

source full: https://github.com/Riya-Christi/angular-resolver-example.git