Заблаговременная выборка означает получение данных до того, как они отобразятся на экране. В этой статье вы узнаете, как получить данные перед изменением маршрутизации. В этой статье вы научитесь использовать resolver , применять resolver в Angular App и применять их к общей предварительно загруженной навигации. [Рекомендация по теме: «Урок по Angular»]
ResolverResolver играет роль промежуточного программного обеспечения между маршрутизацией и компонентами. Предположим, у вас есть форма без данных, и вы хотите представить пользователю пустую форму, отобразить loader во время загрузки пользовательских данных, а затем, когда данные будут возвращены, заполнить форму и скрыть loader .
Обычно мы получаем данные в функции перехвата ngOnInit() компонента. Другими словами, после загрузки компонента мы инициируем запрос данных.
Работая в ngOnInit() , нам нужно добавить отображение loader на его страницу маршрутизации после загрузки каждого необходимого компонента. Resolver может упростить добавление и использование loader . Вместо добавления loader к каждому маршруту вы можете просто добавить по одному loader для каждого маршрута.
В этой статье будут использованы примеры для анализа знаний resolver . Чтобы вы могли его запомнить и использовать в своих проектах.
Resolver в приложенияхЧтобы использовать resolver в приложениях, вам необходимо подготовить некоторые интерфейсы. Вы можете смоделировать его через JSONPlaceholder, не разрабатывая его самостоятельно.
JSONPlaceholder — отличный интерфейсный ресурс. Вы можете использовать его, чтобы лучше изучить связанные концепции внешнего интерфейса, не ограничиваясь интерфейсом.
Теперь, когда проблема с интерфейсом решена, мы можем запустить приложение- resolver . resolver — это сервис промежуточного программного обеспечения, поэтому мы создадим сервис.
$ ng gssolvers/demo-resolver --skipTests=true
--skipTests=true пропускает создание тестовых файлов
. Служба создается в папке src/app/resolvers . В интерфейсе resolver есть resolve() , который имеет два параметра: route (экземпляр ActivatedRouteSnapshot ) и state (экземпляр RouterStateSnapshot ).
loader обычно записывает все AJAX запросы в ngOnInit() , но логика будет реализована в resolver вместо ngOnInit() .
Затем создайте сервис для получения данных списка в JSONPlaceholder . Затем вызовите его в resolver , а затем настройте информацию resolve в маршруте (страница будет ждать), пока resolver не будет обработан. После обработки resolver мы можем получить данные посредством маршрутизации и отобразить их в компоненте.
$ ng gs Services/posts --skipTests=true
Теперь, когда мы успешно создали сервис, пришло время написать логику для запроса AJAX .
Использование model может помочь нам уменьшить количество ошибок.
$ ng g class models/post --skipTests=true
post.ts
класс экспорта Post { id: номер;
заголовок: строка;
тело: строка;
идентификатор пользователя: строка;
} model готова, пришло время получить данные post .
post.service.ts
import {Injectable} from "@angular/core";
импортировать { HttpClient } из "@angular/common/http";
импортировать {Сообщение} из "../models/post";
@Инъекционный({
предоставлено: "корень"
})
класс экспорта PostsService {
конструктор (частный _http: HttpClient) {}
getPostList() {
let URL = "https://jsonplaceholder.typicode.com/posts";
верните это._http.get<Post[]>(URL);
}
} Теперь эту службу можно вызвать в любое время.
demo-resolver.service.ts
import {Injectable} from "@angular/core";
импортировать {
Решать,
Активированный снимок маршрута,
Моментальный снимок состояния маршрутизатора
} из "@angular/router";
импортировать { PostsService } из "../services/posts.service";
@Инъекционный({
предоставлено: "корень"
})
класс экспорта DemoResolverService реализует Resolve<any> {
конструктор (частный _postsService: PostsService) {}
разрешить (маршрут: ActivatedRouteSnapshot, состояние: RouterStateSnapshot) {
верните это._postsService.getPostList();
}
} Данные списка сообщений, возвращенные resolver . Теперь вам нужен маршрут для настройки resolver , получения данных из маршрута и последующего отображения данных в компоненте. Чтобы выполнять переходы маршрутизации, нам нужно создать компонент.
$ ng gcComponents/post-list --skipTests=true
Чтобы сделать маршрут видимым, добавьте router-outlet в app.component.ts .
<router-outlet></router-outlet>
Теперь вы можете настроить файл app-routing.module.ts . Следующий фрагмент кода поможет вам понять resolver конфигурации маршрута.
app-routing-module.ts
import { NgModule } from "@angular/core";
импортировать {Маршруты, RouterModule} из "@angular/router";
импортировать { PostListComponent } из "./comComponents/post-list/post-list.comComponent";
импортировать {DemoResolverService} из "./resolver/demo-resolver.service";
константные маршруты: Маршруты = [
{
путь: "сообщения",
компонент: PostListComponent,
решать: {
сообщения: DemoResolverService
}
},
{
путь: "",
redirectTo: "сообщения",
pathMatch: «полный»
}
];
@NgModule({
импорт: [RouterModule.forRoot(маршруты)],
экспорт: [RouterModule]
})
класс экспорта AppRoutingModule {} В конфигурацию маршрутизации добавлено resolve , которое инициирует HTTP запрос, а затем позволяет компоненту инициализироваться при успешном возврате HTTP запроса. Маршрут соберет данные, возвращаемые HTTP запросом.
чтобы показать пользователю, что запрос выполняется, мы пишем публичный и простой loader в AppComponent . Вы можете настроить его по мере необходимости.
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: логическое значение;
конструктор (частный _router: Маршрутизатор) {}
ngOnInit() {
это.routerEvents();
}
routerEvents() {
this._router.events.subscribe((событие: RouterEvent) => {
переключатель (истина) {
событие случая экземпляра NavigationStart: {
this.isLoader = правда;
перерыв;
}
событие случая экземпляра NavigationEnd: {
this.isLoader = ложь;
перерыв;
}
}
});
}
} Когда начинается навигация, значению isLoader присваивается true , и вы увидите следующий эффект на странице.
Когда resolver завершит обработку, он будет скрыт.
Теперь пришло время получить значение из маршрута и отобразить его.
port-list.comComponent.ts
import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute } из "@angular/router";
импортировать {Сообщение} из "src/app/models/post";
@Компонент({
селектор: "app-post-list",
templateUrl: "./post-list.comComponent.html",
styleUrls: ["./post-list.comComponent.scss"]
})
класс экспорта PostListComponent реализует OnInit {
сообщения: Сообщение[];
конструктор (частный _route: ActivatedRoute) {
this.posts = [];
}
ngOnInit() {
this.posts = this._route.snapshot.data["posts"];
}
} Как показано выше, значение post берется из информационных data моментального снимка ActivatedRoute . Оба эти значения можно получить, если вы настраиваете в маршруте одну и ту же информацию.
Мы визуализируем в HTML следующим образом.
<div class="post-listgrid-container">
<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);
}
.карта {
поле: 10 пикселей;
коробка-тень: черный 0 0 2px 0px;
отступ: 10 пикселей;
} Для написания стилей рекомендуется использовать препроцессор scss.
После получения данных из маршрута они будут отображаться в HTML . Эффект следующий: снимок.
К этому моменту вы узнали, как использовать resolver в своем проекте.
В сочетании с дизайном взаимодействия с пользователем и с помощью resolver вы можете повысить производительность своего приложения. Чтобы узнать больше, вы можете посетить официальный сайт.
Эта статья представляет собой перевод, выполненный с использованием свободного перевода, с добавлением личного понимания и комментариев. Исходный адрес:
https://www.pluralsight.com/guides/prefetching-data-for-an-angular-route.