라우팅 해상도와 각도 라우터를 함께 사용하는 방법

라우팅 해상도와 각도 라우터를 함께 사용하는 방법

2022-06-01 last update

43 minutes reading Angular

소개


API에서 데이터를 검색하고 표시하는 방법 중 하나는 사용자가 구성 요소로 라우팅한 다음 이 구성 요소의 ngOnInit 갈고리에서 서비스의 방법을 호출하여 필요한 데이터를 얻는 것이다.데이터를 가져올 때 구성 요소에 로드 표시기가 표시될 수 있습니다.
또 다른 aroute resolver를 사용하는 방법은 새로운 노선으로 이동하기 전에 데이터를 얻을 수 있도록 합니다.
사용할 수 있는 API 중 하나는 Hacker News API 입니다.해커 뉴스는 링크와 토론 링크를 공유하는 사이트다.이 API는 가장 유행하는 게시물을 검색하고 개별 게시물에 대한 정보를 표시하는 데 사용됩니다.
이 강좌에서 수집된 데이터의 경로를 표시하기 전에 해커 뉴스 API에서 데이터를 얻을 수 있는 루트 해상도를 실현할 것입니다.

선결 조건


이 강좌를 완성하려면 다음이 필요합니다.
  • 노드.js를 로컬에 설치하면 다음과 같은 방식으로 조작할 수 있습니다 How to Install Node.js and Create a Local Development Environment.
  • 익숙함setting up an Angular project.
  • 이 강좌는 노드 v15.3.0, npm v6.14.9, @angular/core v11.0.1, @angular/common v11.0.1, @angular/router v11.0.1, rxjs v6.6.0을 통해 검증되었다.

    단계 1 - 항목 설정


    이 강좌에서 @angular/cli 생성된 기본 각도 항목을 사용하여 구축합니다.
    1. npx @angular/cli new angular-route-resolvers-example --style=css --routing --skip-tests
    이렇게 하면 스타일을 CSS(Sass, Less 또는 터치펜과 상대적)로 설정하고 라우팅을 활성화하고 테스트를 건너뛸 수 있는 새로운 각도 항목이 구성됩니다.
    새로 만든 프로젝트 디렉토리로 이동하려면 다음과 같이 하십시오.
    1. cd angular-route-resolvers-example
    @angular/router를 사용하여 새 각도 항목이 생성됩니다.

    단계 2 - 파서 작성


    해상도를 실현하는 것부터 시작합니다. 이 해상도는 2초 지연된 후에 문자열을 되돌려줍니다.이 작은 개념은 대형 프로젝트에 응용할 수 있는 배선의 기초를 탐색하는 데 도움이 된다는 것을 증명한다.
    먼저 파서 자체 파일에 별도의 클래스를 만듭니다.
    1. ./node_modules/@angular/cli/bin/ng generate resolver news
    그러면 @angular/cli 라는 해상도가 생성됩니다.
    src/app/news.분해기.ts
    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));
      }
    }
    
    Angular router를 실현하는 news 인터페이스는 Resolve 방법이 필요합니다.이 방법에서 되돌아오는 모든 내용은 해석된 데이터가 될 것이다.
    이 코드는 2초 지연된 후에 봉인된 문자열의 관찰 대상을 되돌려줍니다.

    단계 3 - 라우팅 구성


    두 가지 다른 노선을 체험하기 위해서는 두 개의 새로운 구성 요소가 필요합니다.resolve 은 로그인 페이지입니다.home는 해커 뉴스 API의 최상위 게시물을 특징으로 합니다.
    먼저 top 를 사용하여 @angular/cli 구성 요소를 생성합니다.
    1. ./node_modules/@angular/cli/bin/ng generate component home
    그런 다음 home 를 사용하여 @angular/cli 어셈블리를 생성합니다.
    1. ./node_modules/@angular/cli/bin/ng generate component top
    이제 라우팅 모듈을 파서를 포함하도록 설정할 수 있습니다.
    src/응용 프로그램/응용 프로그램 루트.단원ts
    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 { }
    
    해석 프로그램이 어떻게 서비스처럼 제공되는지, 그리고 루트 정의에 해석 프로그램을 포함하는지 주의하십시오.여기에서 확인 데이터는 top 키 아래에서 사용할 수 있습니다.

    단계 4 - 어셈블리에서 해결된 데이터에 액세스


    구성 요소에서 messagedata 객체의 ActivatedRoute 속성을 사용하여 해결된 데이터에 액세스할 수 있습니다.
    src/app/top/top.구성 부분ts
    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;
      }
    }
    
    이제 어셈블리에서 다음과 같이 snapshot 메시지에 액세스할 수 있습니다.
    src/app/top/top.단원html
    <p>The message: {{ data.message }}</p>
    
    이제 응용 프로그램을 컴파일할 수 있습니다.
    1. npm start
    웹 브라우저에서 접근 Route!.
    Output
    The message: Route!
    localhost:4200/top 노선을 탐색할 때, 데이터가 먼저 해석되기 때문에 현재 2초의 지연이 있음을 발견할 수 있습니다.

    단계 5 - API에서 데이터 분석


    실제 API를 통해 일부 데이터를 얻을 수 있으므로 더욱 사실적으로 작업할 수 있습니다.여기서 해커 뉴스 API에서 데이터를 가져오는 서비스를 만들 것입니다.
    단점을 요청하려면 HttpClient 이 필요합니다.
    먼저 topHttpClientModule 에 추가합니다.
    src/app/app.단원ts
    
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
    그런 다음 새 서비스를 만듭니다.
    1. ./node_modules/@angular/cli/bin/ng generate service news
    이 서비스는 app.module.ts 를 사용하여 @angular/cli 라는 서비스를 생성합니다.
    src/app/news.서비스ts
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    
    @Injectable({
      providedIn: 'root'
    })
    export class NewsService {
      constructor(private http: HttpClient) { }
    
      getTopPosts() {
        const endpoint = 'https://hacker-news.firebaseio.com/v0/topstories.json';
    
        return this.http.get(endpoint);
      }
    }
    
    이제 news 의 문자열 코드를 NewsResolver 로 바꿀 수 있습니다.
    src/app/news.분해기.ts
    import { Injectable } from '@angular/core';
    import { Resolve } from '@angular/router';
    import { Observable } from 'rxjs';
    
    import { NewsService } from './news.service';
    
    export class NewsResolver implements Resolve<any> {
      constructor(private newsService: NewsService) {}
    
      resolve(): Observable<any> {
        return this.newsService.getTopPosts();
      }
    }
    
    브라우저에서 NewsService 경로를 보면 top 해킹 뉴스의 핫한 게시물을 나타내는 숫자 목록이 표시됩니다.

    단계 6 - 액세스 경로 매개변수

    id 객체를 사용하여 파서에서 현재 파이프라인 매개변수에 액세스할 수 있습니다.
    다음은 해상도를 사용하여 현재 라우팅 ActivatedRouteSnapshot 매개변수에 액세스할 수 있는 예입니다.
    먼저 id 를 사용하여 @angular/cli 라는 해상도를 생성합니다.
    1. ./node_modules/@angular/cli/bin/ng generate resolver news
    그런 다음 post 을 사용으로 수정합니다post.resolver.ts.
    src/app/post.분해기.ts
    import { Injectable } from '@angular/core';
    import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
    import { Observable } from 'rxjs';
    
    import { NewsService } from './news.service';
    
    @Injectable({
      providedIn: 'root'
    })
    export class PostResolver implements Resolve<any> {
      constructor(private newsService: NewsService) {}
    
      resolve(route: ActivatedRouteSnapshot): Observable<any> {
        return this.newsService.getPost(route.paramMap.get('id'));
      }
    }
    
    다음으로 ActivatedRouteSnapshot 메서드를 getPost 에 추가합니다.
    src/app/news.서비스ts
    // ...
    
    export class NewsService {
      constructor(private http: HttpClient) { }
    
      // ...
    
      getPost(postId: string) {
        const endpoint = 'https://hacker-news.firebaseio.com/v0/item';
    
        return this.http.get(`${endpoint}/${postId}.json`);
      }
    }
    
    NewsServicePostResolver 노선을 post/:id에 추가합니다.
    src/응용 프로그램/응용 프로그램 루트.단원ts
    // ...
    
    import { PostResolver } from './post.resolver';
    
    // ...
    
    const routes: Routes = [
      // ...
      {
        path: 'post/:id',
        component: PostComponent,
        resolve: { newsData: PostResolver }
      }
    ];
    
    // ...
    
    다음으로 새 app-routing.module.ts 를 만듭니다.
    1. ./node_modules/@angular/cli/bin/ng generate component post
    그런 다음 스냅샷 데이터를 사용하도록 수정PostComponent합니다.
    src/app/post/post.구성 부분ts
    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    
    @Component({ ... })
    export class PostComponent implements OnInit {
      data: any;
    
      constructor(private route: ActivatedRoute) { }
    
      ngOnInit(): void {
        this.data = this.route.snapshot.data;
      }
    }
    
    표시를 위해 post.component.ts 수정:
    src/app/post/post.구성 부분html
    <p>{{ data.newsData.title }}</p>
    
    현재 사용자가 post.component.html로 이동하면postidtitle의 데이터를 분석합니다.

    단계 7 - 오류 처리


    데이터를 추출하는 중 오류가 발생하면 RxJS’s catch 조작부호를 사용하여 해상도에서 오류를 포착하고 처리할 수 있습니다.예를 들어, 다음과 같은 내용이 있습니다.
    src/app/news.분해기.ts
    import { Injectable } from '@angular/core';
    import { Resolve } from '@angular/router';
    
    import { Observable, of } from 'rxjs';
    import { catchError } from 'rxjs/operators';
    
    import { NewsService } from './news.service';
    
    @Injectable()
    export class NewsResolver implements Resolve<any> {
      constructor(private newsService: NewsService) {}
    
      resolve(): Observable<any> {
        return this.newsService.getTopPosts().pipe(catchError(() => {
          return of('data not available at this time');
        }));
      }
    }
    
    또는 관찰할 수 있는 객체http://localhost:4200/post/15392112를 반환하고 사용자를 루트 경로로 되돌릴 수 있습니다.
    src/app/news.분해기.ts
    import { Injectable } from '@angular/core';
    import { Router, Resolve } from '@angular/router';
    
    import { Observable, EMPTY } from 'rxjs';
    import { catchError } from 'rxjs/operators';
    
    import { NewsService } from './news.service';
    
    @Injectable()
    export class NewsResolver implements Resolve<any> {
      constructor(private router: Router, private newsService: NewsService) {}
    
      resolve(): Observable<any> {
        return this.newsService.getTopPosts().pipe(catchError(() => {
          this.router.navigate(['/']);
          return EMPTY;
        }));
      }
    }
    
    API에서 데이터를 검색하는 동안 오류가 발생하면 두 가지 방법이 더 좋은 사용자 환경을 제공합니다.

    결론


    이 강좌에서 이 해상도는 수집된 데이터를 표시하는 경로로 이동하기 전에 해커 뉴스 API에서 데이터를 가져옵니다.이것은 이용15392112,EMPTY@angular/router를 통해 이루어진 것이다.
    Angular에 대한 자세한 내용은 our Angular topic page 의 연습 및 프로그래밍 항목을 참조하십시오.