Перейти к содержанию

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 страниц или редиректа к другим роутам.