Параметр углового маршрутизатора

Question

Мой угловой веб-сайт содержит компонент, который читает параметр, переданный в URL

www.mywebsite.com/main?id=value

Можно ли сделать тип пользователя

www.mywebsite.com/main/gianni

, и компонент получит gianni а параметр?

Answer 1

Попробуйте:

Настройка маршрутизатора:

{
    path: 'main/:id',
    component: MainComponent
},

В вашем основном компоненте:

  ngOnInit() {
    this.route.params.subscribe(params => {
      const id = params['id'];
      this.loadData(id);
    });
  }

Рабочий пример Stackblitz .

ОБНОВЛЕНИЕ

Чтобы передать полученное значение, попробуйте следующее:

main.component.html (передайте полученный идентификатор в свойство "id" компонента контакта @Input)

<app-contact [id]="id"></app-contact>

contact.component.ts

import { Component, OnChanges, SimpleChanges, Input } from "@angular/core";

@Component({
  selector: "app-contact",
  templateUrl: "./contact.component.html",
  styleUrls: ["./contact.component.css"]
})
export class ContactComponent implements OnChanges {

  @Input() id;

  constructor() {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes["id"]) {
      console.log(`call backend to get data for [${this.id}]`);
    }
  }

}

new Stackblitz .

Answer 2

Да, это возможно.

const routes: Routes = [
  // routes
  {
    path: 'main',
    component: MainComponent,
    children: [
      {
        path: ':id',
        component: AnotherComponent,
      },
    ],
  },
];

все, что передано параметром после www.mywebsite.com/main/gianna, будет доступно по адресу

this.route.snapshot.params ['id'];

Возможно, вы захотите посмотреть здесь