Route продолжение

Передача параметров и фрагментов запроса

Формирование ссылки вида /servers/2/edit?allowEdit=1#loading:

<a
[routerLink] = "['/servers', server.id, 'edit']"
[queryParams] = "{allowEdit: '1'}"
fragment = 'loading'
*ngFor="let server of servers">

{{ server.name }}
</a>

Программно:

constructor(private router: Router) { }

this.router.navigate(
[
'/servers',
id,
'edit'
],
{
queryParams: {allowEdit: '1'},
fragment: 'loading'
}
);

Получение параметров url

//подключить класс
import { ActivatedRoute } from '@angular/router';

//инициализировать элемент класса
constructor(private route: ActivatedRoute) { }

//получить параметры и фрагмент (не реактивно)
this.route.snapshot.queryParams
this.route.snapshot.fragment

//подписаться (реактивно)
this.route.queryParams.subscribe(...);
this.route.fragment.subscribe(...);

Родительский роутинг

Дочерние роутинги создаются следующим образом. В app.module.ts:

{path: 'servers', component: ServersComponent, children: [
{path: ':id', component: ServerComponent},
{path: ':id/edit', component: EditServerComponent},
]},

Пример использования параметров запроса

В шаблоне есть кнопка на редактирование данного элемента:

<button 
class="btn btn-primary"
(click)="onEdit()">

Edit Server
</button>

Обработчик данного события выглядит так:

onEdit() {
this.router.navigate(['edit'], {relativeTo: this.route, queryParamsHandling: 'preserve'});
}

queryParamsHandling важный параметр, который позволяет сохранять параметры url при переходе.

Компонент редактирования при инициализации подписывается на изменение параметров, и на основании параметров uri определяет значение своей переменной:

ngOnInit() {
this.route.queryParams.subscribe(
(queryParams: Params) => {
this.allowEdit = queryParams['allowEdit'] === '1';
}
);
//...
}

Редирект

Рассмотрим редирект на примере 404 страницы. Создадим настройку редиректа, нужно чтобы он находится в самом низу путей (параметры роутера в модуле) и совпадал с любым адресом. Таким образом, если запрос не соответствует запросам описанным выше, то он будет перенаправлен на страницу 404:

const appRoutes: Routes = [
//...
{path: 'page404', component: Page404Component},
{path: '**', redirectTo: '/page404'},
];

** в примере выше означает соответствие чему угодно. Эта последовательность полезна для создания 404 страниц или редиректа к другим роутам.

Источник – курс «Angular 5 the complete guide», Maximilian Schwarzmüller
Редактировать на GitHub