Angular Routing Resolver

Angular Routing Resolver

Angular는  라우팅 시스템을 제공하며, 이 중 Resolver는 특정 라우트로 이동하기 전에 필요한 데이터를 미리 가져오는 데 사용됩니다.

사용자가 페이지에 도달했을 때 필요한 데이터를 이미 준비된 상태로 제공할 수 있어 초기 로딩 시간을 줄이고 사용자 경험을 개선할 수 있습니다.

 

Resolver의 작동 방식

Resolver는 Angular의 Resolve 인터페이스를 구현하는 서비스입니다.

라우팅이 활성화되기 전에 실행되며, 데이터를 가져오는 작업을 수행합니다.

이 작업은 보통 비동기 방식으로 이루어지며, Observable, Promise, 또는 동기 데이터를 반환할 수 있습니다.

 

 

Resolver 구현 방법

1.서비스 생성

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable, of } from 'rxjs';
import { DataService } from './data.service';

@Injectable({ providedIn: 'root' })
export class MyResolver implements Resolve<any> {
  constructor(private dataService: DataService) {}

  resolve(): Observable<any> {
    return this.dataService.getData();
  }
}

• 위 코드에서 DataService는 데이터를 가져오는 서비스를 의미합니다.
• resolve 메서드는 데이터를 반환하며, 이 데이터는 라우팅이 완료되기 전에 준비됩니다.

 

2.라우팅 모듈에 Resolver 설정

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyResolver } from './my-resolver.service';
import { MyComponent } from './my.component';

const routes: Routes = [
  {
    path: 'my-path',
    component: MyComponent,
    resolve: { myData: MyResolver },
  },
];

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

• 위에서 resolve 속성은 Resolver를 등록합니다.
• myData는 Resolver의 결과를 참조하는 키입니다.

 

3.컴포넌트에서 데이터 접근

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

@Component({
  selector: 'app-my',
  template: '<p>{{ data | json }}</p>',
})
export class MyComponent implements OnInit {
  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.data = this.route.snapshot.data['myData'];
  }
}

• ActivatedRoute를 사용하여 Resolver에서 반환된 데이터를 가져올 수 있습니다.

 

---

Resolver의 장점

1. 사용자 경험 향상: 필요한 데이터를 미리 로드하여 페이지 로딩 후 추가 요청을 줄임.
2. 코드 가독성 증가: 데이터를 컴포넌트 초기화 로직과 분리하여 유지보수가 쉬움.
3. 라우팅 관리: 데이터 준비가 완료될 때만 페이지를 로드하므로 데이터 의존성을 관리하기 용이.

---

 

Resolver 사용 시 고려 사항

• 로딩 시간: 데이터 양이 많거나 네트워크 지연이 클 경우 로딩 시간이 길어질 수 있습니다.
• 에러 핸들링: Resolver에서 에러가 발생할 경우 적절한 대체 경로나 메시지를 제공해야 합니다.

에러를 처리하는 예

import { Injectable } from '@angular/core';
import { Resolve, Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { DataService } from './data.service';

@Injectable({ providedIn: 'root' })
export class MyResolver implements Resolve<any> {
  constructor(private dataService: DataService, private router: Router) {}

  resolve(): Observable<any> {
    return this.dataService.getData().pipe(
      catchError((error) => {
        console.error('Data loading failed', error);
        this.router.navigate(['/error']);
        return of(null);
      })
    );
  }
}