Как передать аргумент компоненту через маршрутизатор

Question

У меня есть кнопка, и при нажатии на кнопку я хочу показать новый компонент. При вызове компонента я также хочу передать аргумент

Например. UserDetailComponent должен быть вызван и должен быть передан id. Сначала UserDetailComponent должен получить информацию о пользователе, используя id из базы данных, а затем стать видимым.

Я создал UserDetailComponent следующим образом:

export class UserDetailsComponent implements OnInit {

  @Input()
  id:number //TODOM change to UUID
  constructor() { }

  ngOnInit() {
    console.log("will query db here")
  }
}

и создайте запись в Routes следующим образом:

{
    path:'user-details/:id',
    component:UserDetailsComponent
}

Но я не знаю, как вызвать этот компонент с кнопки. Я написал следующий HTML, но я получаю error DOMException: Failed to execute 'setAttribute' on 'Element': ',' is not a valid attribute name

<td> <button [routerLink]="[userDetailRouterLink,1]", id="show-more-button" class="btn content-div__button--blue btn-sm">Show more</button></td>

userDetailRouterLink определяется в файле .ts как userDetailRouterLink = '/user-details'

Answer 1

Давайте рассмотрим пример: если вы хотите отправить идентификатор из списка пользователей в компонент сведений о пользователе и получить информацию о пользователе на основе полученного идентификатора.

Список пользовательских компонентов: list-users.component.ts

<button class="btn btn-success" [routerLink]="['/user-details', user.id]">

У вас должен быть динамический маршрут для получения сведений о пользователе на основе полученного идентификатора.

{ path: 'user-details/:id', component: UserDetailsComponent }

В user-details.component.ts вы должны получить идентификатор из активированных маршрутов, как показано ниже

// Import ActivateRoute
import {ActivatedRoute } from '@angular/router';
.........
id: any;

constructor (private activatedRoute: ActivatedRoute,) {
    this.activatedRoute.params.subscribe(params => this.id = params['id']);

    // After receiving the ID, you can make a call to fetch the user data from database.
    this.getUserDetails(this.id);
  }

Answer 2

У вас есть опечатка здесь:

<td> <button  [routerLink]="[userDetailRouterLink,1]", id="show-more-button" class="btn content-div__button--blue btn-sm">Show more</button></td>
                                                     ^

Angular, по-видимому, интерпретирует его как новый атрибут (возможно, некоторую причуду реализации), и, поскольку он использует технику компиляции AOT, вы получаете ошибку JavaScript (так как угловой шаблон внутренне компилируется для манипулирования DOM на основе JavaScript).