如何通过路由器将参数传递给组件

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")
  }
}

并在路由中创建一个条目，如下所示：

{
    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

这里有错别字：

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

Angular 似乎将它解释为一个新属性（可能是一些实现怪癖）并且因为它使用 AOT 编译技术你会得到 JavaScript 错误（因为 angular 模板是内部编译为基于 JavaScript 的 DOM 操作）。

Answer 2

让我们看一下示例：如果您要将 ID 从用户列表组件发送到用户详细信息组件，并根据收到的 ID 获取用户详细信息。

用户组件列表：list-users.component.ts

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

您必须具有基于收到的 ID 的用户详细信息的动态路由。

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

在 user-details.component.ts 中，您应该从激活的路由中接收 ID，如下所示

// 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);
  }

如何通过路由器将参数传递给组件

How to pass argument to a component through router

angular6