Как сделать динамическую ссылку в angular?

Пользователь

от enid , в категории: JavaScript , 5 месяцев назад

Как сделать динамическую ссылку в angular?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от shayna.buckridge , 4 месяца назад

@enid 

В Angular можно использовать директиву [routerLink] для создания динамической ссылки.


Для создания динамической ссылки, вы можете передать параметры в качестве аргументов в метод router.navigate() или использовать свойство массива в директиве [routerLink].


Пример 1: Использование метода router.navigate() для динамического создания ссылки:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { Router } from '@angular/router';
    
@Component({...})
export class MyComponent {
  constructor(private router: Router) {}

  navigateToDynamicLink(id: number) {
    this.router.navigate(['/my-page', id]);
  }
}


В этом примере, при вызове метода navigateToDynamicLink(id), где id - это динамический параметр, будет создана ссылка вида /my-page/:id, где :id - это динамический сегмент, в который будет передано значение переменной id.


Пример 2: Использование свойства массива в директиве [routerLink]:

1
2
3
4
@Component({...})
export class MyComponent {
  dynamicId: number = 123;
}


1
<a [routerLink]="['/my-page', dynamicId]">Dynamic Link</a>


В этом примере, при использовании routerLink с массивом ['/my-page', dynamicId], будет создана динамическая ссылка /my-page/123, где 123 - это значение переменной dynamicId.