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

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

2 个答案: