Angular 4 параметры в адресной строке

Параметры маршрута в Angular (пример)

Эта заметка лишь краткая шпаргалка и не гарантирует правильности всего ниже написанного. В классе модуля определим маршрут и  параметр маршрута

 

// определение маршрутов
const appRoutes: Routes =[
.......
{ path: 'item/:id', component: ItemComponent},
.......
];

 

В компоненте item.component.ts  добавим специальный сервис ActevatedRouter и в конструкторе компонента напишем получение и обработку парметра адресной строки с помощью ActevatedRouter

 

.....
import { ActivatedRoute} from '@angular/router';
@Component({
selector: 'item-info',
template: `<h3>Модель {{id}}</h3>`
})
export class ItemComponent { 
id: number;
    subscription :any
constructor(private activateRoute: ActivatedRoute){
this.subscription = activateRoute.paramMap.subscribe(ParamsAsMap =>{
this.id = parseInt(ParamsAsMap.get('id'));
});
} }

 

Теперь для того чтобы передать параметр в ссылке мы укажем директиву routerLink

<a [routerLink]="['item', '5']">item 5</a>
ИЛИ
<a routerLink="item/5">item 5</a>

 

Как программно изменить параметр в адресной строке Angular 4

 

Для этого используется сервис Router, Его нужно импортировать в компонент  и он предоставляет  средства для работы с роутами. А вот ActevatedRoute предоставляет средства только для работы с роутами связанными с компонентом!!!!!!

 

import { Router} from '@angular/router';
............
constructor(     private router:Router){}
...... 
public viewPost(id:number){
this.router.navigate(['item', id], { skipLocationChange: false})
}

 

skipLocationChange - параметр указывающий изменять ли URL (BOOLIAN)

 

Как получить GET параметры в Angular 4

 

Для этого опять будет использоваться сервис ActevatedRoute у него есть свойство queryParams типа Observable  — как раз оно и вернет нам гет параметры .

Пример

 

constructor(  private activeRoute: ActivatedRoute){
this.activeRoute.queryParams.subscribe(params => console.log(params));
}

 

Чтобы задать гет параметры запроса в ссылку добавляется директива queryParams

<a [routerLink]="['item']" [queryParams]="{ city: 'Amsterdam' }">Добавим параметр апроса ?city=amsterdam</a>

А чтобы программно добавит параметр запроса в Ангулар 4 используется сервис Router и его метод navigate

this.router.navigate(['/item'], { queryParams: { city:'Amsterdam' } });

 

 


Добавить комментарий