Как передать параметр routerLink, который находится где-то внутри URL?

Question

Я знаю, что могу передать параметр routerLink для таких маршрутов, как

/user/:id

написав

[routerLink]="['/user', user.id]"

но как насчет маршрутов, таких как этот:

/user/:id/details

Есть ли способ установить этот параметр или я должен рассмотреть другую схему URL?

Answer 1

В вашем конкретном примере вы бы сделали следующее routerLink:

[routerLink]="['user', user.id, 'details']"

Для этого в контроллере вы можете ввести Router и использовать:

router.navigate(['user', user.id, 'details']);

Дополнительная информация в разделе " Параметры угловых документов" в разделе " Маршрутизация и навигация".

Answer 2

Возможно, это действительно поздний ответ, но если вы хотите перейти на другую страницу с параметром, вы можете,

[routerLink]="['/user', user.id, 'details']"

Также вы не должны забывать о конфигурации маршрутизации, как,

 [path: 'user/:id/details', component:userComponent, pathMatch: 'full']

Answer 3

Сначала настройте в таблице:

const routes: Routes = [  
{
  path: 'class/:id/enrollment/:guid',
  component: ClassEnrollmentComponent
 }
];

теперь в коде сценария типа:

this.router.navigate([`class/${classId}/enrollment/${4545455}`]);

получать параметры в другом компоненте

 this.activatedRoute.params.subscribe(params => {
  let id = params['id'];
  let guid = params['guid'];

  console.log(`${id},${guid}`);
  });

Answer 4

Это очень просто

      <a routerLink="/user/{{id}}/details"></a>

Answer 5

Есть несколько способов добиться этого.

• Через директиву [routerLink]
• Метод navigate(Array) класса Router
• Метод navigateByUrl(string), который принимает строку и возвращает обещание.

Атрибут routerLink требует, чтобы вы импортировали routingModule в функциональный модуль на случай, если вы лениво загрузили функциональный модуль, или просто импортируете app-routing-module, если он не добавляется автоматически в массив импорта AppModule.

• RouterLink

<a [routerLink]="['/user', user.id]">John Doe</a>
<a routerLink="urlString">John Doe</a> // urlString is computed in your component

• Навигация

// Inject Router into your component
// Inject ActivatedRoute into your component. This will allow the route to be done related to the current url
this._router.navigate(['user',user.id], {relativeTo: this._activatedRoute})

• NavigateByUrl

this._router.navigateByUrl(urlString).then((bool) => {}).catch()

Answer 6

constructor(private activatedRoute: ActivatedRoute) {

this.activatedRoute.queryParams.subscribe(params => {
  console.log(params['type'])
  });  }

У меня это работает!

Answer 7

app-routing.module.ts

const routes: Routes = [
  { path: 'products', component: ProductsComponent },
  { path: 'product/:id', component: ProductDetailsComponent },
  { path: '', redirectTo: '/products', pathMatch: 'full' },
];

В контроллере вы можете перемещаться так:

this.router.navigate(['/products', productId]);

Это приведет вас к следующему пути: http://localhost:4200/products/product-id

Ссылка

Answer 8

Вы можете использовать динамические значения для создания ссылки. Для динамической ссылки передайте массив сегментов пути, а затем параметры для каждого сегмента. Например, создает ссылку на /team/11/user/bob;details=true.

Answer 9

конструктор (частный ActivatedRoute: ActivatedRoute) {}

в случае использования this.activatedRoute.parmas.subscribe(params => {console.log(params['type'])}); } поэтому params вместо queryparamas для получения параметра из URL-адреса -