меню

Разрешение данных это процесс их получения перед активацией роута. В приложении возможна задержка перед тем, как данные будут предоставлены сервером. Для того, чтобы не показывать пользователю пустую страницу, роутер может реализовать интерфейс Resolve и получить все необходимые данные до момента активации роута. Таким образом, пользователь сразу увидит контент страницы на которую перешел.

Создадим сервис с интерфейсом Resolve \app\servers\server\server-resolver.service.ts:

 
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
  import { Observable } from 'rxjs/Observable';
  import { Injectable } from '@angular/core';

  import { ServersService } from '../servers.service';

  interface Server {
    id: number;
    name: string;
    status: string;
  }

  @Injectable()
  export class ServerResolver implements Resolve {
    constructor(private serversService: ServersService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | Server {
      return this.serversService.getServer(+route.params['id']);
    }
  }
 

Зарегистрируем его в провайдерах AppModule.

Затем в Routes добавим ключ resolve:

 
{path: ':id', component: ServerComponent, resolve: {server: ServerResolver}}
  

Перепишем ngOnInit компонента:

  
ngOnInit() {
  this.route.data
 .subscribe(
   (data: Data) => {
   this.server = data['server'];
   }
 );
  // const id = +this.route.snapshot.params['id'];
  // this.server = this.serversService.getServer(id);
 // this.route.params
  //   .subscribe(
  //     (params: Params) => {
  //       this.server = this.serversService.getServer(+params['id']);
  //     }
  //   );
}
  

Возможно, вам будет интересно

Angular Interceptor - перехватчик ошибок http

Время от времени в любом приложении могут возникать ошибки, необходимо внедрить подходящую систему обработки ошибок. В этой статье мы расскажем про различные типы http ошибок и то, как мы можем их решить.

Изменяют ли автономные компоненты способ написания кода в Angular?

С постепенным ростом приложения, бойлерплейт-код, введенный Angular, становится громоздким и трудным для поддержки. Команда Angular стремится сделать архитектуру приложения легче, поэтому одной из новых возможностей, которую они представили, являются автономные компоненты.

Установка Playwright в сочетании с TypeScript для приложений Angular

Playwright — это open-source библиотека для автоматизации браузеров Chromium, Firefox и WebKit. Он известен своей эффективностью в тестировании на уровне пользовательского интерфейса, позволяя разработчикам тестировать приложения на нескольких браузерах.

Создание компонентов в Angular

Компоненты ключевая особенность Angular. Приложение строится из компонентов.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту