미리 가져오는 것은 데이터가 화면에 표시되기 전에 가져오는 것을 의미합니다. 이 문서에서는 변경 사항을 라우팅하기 전에 데이터를 얻는 방법을 알아봅니다. 이 기사를 통해 resolver 사용하고, Angular App 에서 resolver 적용하고, 미리 로드된 일반적인 탐색에 적용하는 방법을 배웁니다. [관련 튜토리얼 추천 : "angular tutorial"]
Resolver 사용해야 하는 이유Resolver 라우팅과 컴포넌트 사이의 미들웨어 서비스 역할을 합니다. 데이터가 없는 양식이 있고 사용자에게 빈 양식을 표시하고 사용자 데이터가 로드되는 동안 loader 표시한 다음 데이터가 반환되면 양식을 채우고 loader 숨기려고 한다고 가정합니다.
일반적으로 우리는 컴포넌트의 ngOnInit() 후크 함수에서 데이터를 얻습니다. 즉, 구성 요소가 로드된 후 데이터 요청을 시작합니다.
ngOnInit() 에서 작업하려면 각 필수 구성 요소가 로드된 후 라우팅 페이지에 loader 표시를 추가해야 합니다. Resolver loader 의 추가 및 사용을 단순화할 수 있습니다. 모든 경로에 loader 추가하는 대신 각 경로에 하나 loader 만 추가하면 됩니다.
이 기사에서는 예제를 사용하여 resolver 의 지식 포인트를 분석합니다. 이를 기억하고 프로젝트에 사용할 수 있습니다.
Resolver 사용하기애플리케이션에서 resolver 사용하려면 몇 가지 인터페이스를 준비해야 합니다. 직접 개발하지 않고도 JSONPlaceholder를 통해 시뮬레이션할 수 있습니다.
JSONPlaceholder 는 인터페이스의 제약을 받지 않고 프런트 엔드 관련 개념을 더 잘 배우는 데 사용할 수 있는 훌륭한 인터페이스 리소스입니다.
이제 인터페이스 문제가 해결되었으므로 resolver 애플리케이션을 시작할 수 있습니다. resolver 는 미들웨어 서비스이므로 서비스를 만들어 보겠습니다.
$ ng gs Resolvers/demo-resolver --skipTests=true
--skipTests=true 테스트 파일 생성을 건너뜁니다
. src/app/resolvers 폴더에 서비스가 생성됩니다. resolver 인터페이스에는 route ( ActivatedRouteSnapshot 인스턴스)와 state ( RouterStateSnapshot 인스턴스)라는 두 개의 매개변수가 있는 resolve() 메서드가 있습니다.
loader 일반적으로 모든 AJAX 요청을 ngOnInit() 에 작성하지만 로직은 ngOnInit() 대신 resolver 에서 구현됩니다.
다음으로 JSONPlaceholder 에서 목록 데이터를 가져오는 서비스를 만듭니다. 그런 다음 resolver 에서 이를 호출하고 resolver 처리될 때까지 경로에서 resolve 정보를 구성합니다(페이지는 대기합니다). resolver 처리된 후 라우팅을 통해 데이터를 얻고 이를 컴포넌트에 표시할 수 있습니다.
$ ng gs services/posts --skipTests=true
이제 서비스를 성공적으로 생성했으므로 AJAX 요청에 대한 로직을 작성할 차례입니다.
model 을 사용하면 오류를 줄이는 데 도움이 될 수 있습니다.
$ ng g class models/post --skipTests=true
post.ts
내보내기 클래스 Post { id: number;
제목: 문자열;
본문: 문자열;
사용자 ID: 문자열;
} model 준비되었습니다. 이제 post 의 데이터를 가져올 시간입니다.
post.service.ts
import { Injectable } from "@angular/core";
"@angular/common/http"에서 { HttpClient }를 가져옵니다.
"../models/post"에서 { 포스트 }를 가져옵니다.
@주입 가능({
제공됨: "루트"
})
내보내기 클래스 PostsService {
생성자(private _http: HttpClient) {}
getPostList() {
URL = "https://jsonplaceholder.typicode.com/posts"를 허용하십시오.
return this._http.get<Post[]>(URL);
}
} 이제 이 서비스는 언제든지 호출될 수 있습니다.
deco-resolver.service.ts
import { Injectable } from "@angular/core";
수입 {
해결하다,
활성화된 경로스냅샷,
라우터상태스냅샷
} "@angular/router"에서;
"../services/posts.service"에서 { PostsService }를 가져옵니다.
@주입 가능({
제공됨: "루트"
})
내보내기 클래스 DemoResolverService는 Resolve<any>를 구현합니다.
생성자(private _postsService: PostsService) {}
해결(경로: ActivatedRouteSnapshot, 상태: RouterStateSnapshot) {
return this._postsService.getPostList();
}
} resolver 에서 반환된 게시물 목록 데이터입니다. 이제 resolver 구성하고 경로에서 데이터를 가져온 다음 구성 요소에 데이터를 표시하기 위한 경로가 필요합니다. 라우팅 점프를 수행하려면 구성요소를 생성해야 합니다.
$ ng gc Components/post-list --skipTests=true
경로를 표시하려면 app.component.ts 에 router-outlet 추가하세요.
<router-outlet></router-outlet>
이제 app-routing.module.ts 파일을 구성할 수 있습니다. 다음 코드 조각은 경로 구성 resolver 이해하는 데 도움이 됩니다.
app-routing-module.ts
import { NgModule } from "@angular/core";
"@angular/router"에서 { 경로, RouterModule }을 가져옵니다.
"./comComponents/post-list/post-list.comComponent"에서 { PostListComponent }를 가져옵니다.
import { DemoResolverService } from "./resolvers/demo-resolver.service";
const 경로: 경로 = [
{
경로: "게시물",
구성요소: PostListComponent,
해결하다: {
게시물: DemoResolverService
}
},
{
길: "",
리디렉션 대상: "게시물",
pathMatch: "전체"
}
];
@NgModule({
가져오기: [RouterModule.forRoot(경로)],
내보내기: [RouterModule]
})
내보내기 클래스 AppRoutingModule {} HTTP 요청을 시작한 후 HTTP 요청이 성공적으로 반환되면 구성 요소를 초기화할 수 있도록 라우팅 구성에 resolve 추가되었습니다. 경로는 HTTP 요청에서 반환된 데이터를 수집합니다.
요청이 진행 중임을 사용자에게 표시 AppComponent loader
필요에 따라 사용자 정의할 수 있습니다.
app.comComponent.html
<div class="loader" *ngIf="isLoader"> <div>로드 중...</div> </div> <router-outlet></router-outlet>
app.comComponent.ts
import { Component } from "@angular/core";
수입 {
라우터,
라우터이벤트,
탐색시작,
탐색 종료
} "@angular/router"에서;
@요소({
선택기: "app-root",
templateUrl: "./app.comComponent.html",
styleUrls: ["./app.comComponent.scss"]
})
내보내기 클래스 AppComponent {
isLoader: 부울;
생성자(private _router: 라우터) {}
ngOnInit() {
this.routerEvents();
}
라우터이벤트() {
this._router.events.subscribe((event: RouterEvent) => {
스위치 (참) {
NavigationStart의 사례 이벤트 인스턴스: {
this.isLoader = true;
부서지다;
}
NavigationEnd의 사례 이벤트 인스턴스: {
this.isLoader = 거짓;
부서지다;
}
}
});
}
} 탐색이 시작되면 isLoader 값이 true 할당되고 페이지에 다음과 같은 효과가 표시됩니다.
resolver 처리가 완료되면 숨겨집니다.
이제 경로에서 값을 가져와 표시할 차례입니다.
port-list.comComponent.ts
import { Component, OnInit } from "@angular/core";
"@angular/router"에서 { Router, ActivatedRoute }를 가져옵니다.
"src/app/models/post"에서 { 포스트 }를 가져옵니다.
@요소({
선택기: "앱-포스트 목록",
templateUrl: "./post-list.comComponent.html",
styleUrls: ["./post-list.comComponent.scss"]
})
내보내기 클래스 PostListComponent는 OnInit를 구현합니다.
게시물: 게시[];
생성자(private _route: ActivatedRoute) {
this.posts = [];
}
ngOnInit() {
this.posts = this._route.snapshot.data["posts"];
}
} 위와 같이 post 의 값은 ActivatedRoute 의 스냅샷 정보 data 에서 가져옵니다. 이 두 값은 모두 경로에서 동일한 정보를 구성하면 얻을 수 있습니다.
HTML 에서는 다음과 같이 렌더링합니다.
<div class="post-list 그리드-컨테이너">
<div class="card" *ngFor="게시물 게시 허용">
<div class="title"><b>{{post?.title}}</b></div>
<div class="body">{{post.body}}</div>
</div>
</div> CSS 조각 스타일을 사용하면 더욱 아름답게 보입니다.
포트 목록.구성 요소
.css .grid-컨테이너 {
디스플레이: 그리드;
그리드 템플릿 열: calc(100% / 3) calc(100% / 3) calc(100% / 3);
}
.카드 {
여백: 10px;
상자 그림자: 검정 0 0 2px 0px;
패딩: 10px;
} 스타일을 작성하려면 scss 전처리기를 사용하는 것이 좋습니다.
경로에서 데이터를 가져온 후 HTML 로 표시됩니다. 효과는 다음과 같습니다: 스냅샷.
이 시점에서는 프로젝트에서 resolver 사용하는 방법을 배웠습니다.
사용자 경험 디자인과 resolver 의 도움을 결합하면 애플리케이션의 성능을 향상시킬 수 있습니다. 더 자세히 알아보려면 공식 웹사이트를 방문하세요.
이 글은 개인적인 이해와 의견을 더해 무료 번역을 활용한 번역입니다. 원문 주소는
https://www.pluralsight.com/guides/prefetching-data-for-an-angular-route
입니다.