Разрешение данных это процесс их получения перед активацией роута. В приложении возможна задержка перед тем, как данные будут предоставлены сервером. Для того, чтобы не показывать пользователю пустую страницу, роутер может реализовать интерфейс 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<Server> {
    constructor(private serversService: ServersService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Server> | Promise<Server> | 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']);
	//     }
	//   );
}