我正在使用angular和firebase实时数据库实现crud应用程序http://localhost:4200/customer/{键值} X 全名 电子邮件 手机号码 位置 行动 {{customer.fullName} {{customer.email} {{customer.mobile}} {{customer.location} 编辑 删除

这是一个客户列表组件。单击edit之后，表单将填充到customer组件，因此在编辑时需要URL中特定记录的键

---

如何在url中传递键值？

您可以使用如下参数声明路由：

<form class="form-inline border-primary mb-3 mt-4 mx-4" style="max-width: 40rem;">
    <input class="form-control" name="searchInput" placeholder="Search" #searchInput="ngModel" [(ngModel)]="searchText" style="width: 80%;">
    <button class="btn btn-outline-primary" (click)="searchText=''">X</button>
</form>

<div class="card border-primary mb-3 mt-4 mx-4" style="max-width: 80rem;">

    <div class="card-body">
        <table class="table table-bordered mt-4 ">
            <thead>
                <tr>
                    <th scope="col">Full Name</th>
                    <th scope="col">Email</th>
                    <th scope="col">Mobile No</th>
                    <th scope="col">Location</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody *ngFor="let customer of customerArray">
                <tr class="table-default mt-3" *ngIf="filterCondition(customer)">
                    <td>{{customer.fullName}}</td>
                    <td>{{customer.email}}</td>
                    <td>{{customer.mobile}}</td>
                    <td>{{customer.location}}</td>
                    <td>
                        <button class="btn btn-outline-info" (click)="customerService.populateForm(customer)" routerLink='/customer'>Edit</button>&nbsp;
                        <button class="btn btn-outline-danger" (click)="onDelete(customer.$key)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>

在ts文件中单击按钮调用函数 并使用下面的行导航它

export const routes: Routes = [
  { path: '/customer/:key', component: YourCustomerComponent}
];

或

在模板中，您也可以这样做

this.router.navigate(['/customer', key]);

然后，您可以通过以下方式阅读：

navigateToEdit(){
// first get data to edit or navigate first than get data and bind that data into html

this.router.navigate(['/customer', key]);
}

希望这对你有帮助

如果有任何问题，请告诉我

---

谢谢

@Triveni Mali，看看上面我更新的答案让我知道..我已经将答案中的

params['id']

替换为

params['key']

编辑的答案，还有一件事你必须将值传递到我们导航的键中

<button (click)="navigateToEdit()">clickB</button>

navigateToEdit(){
// first get data to edit or navigate first than get data and bind that data into html

this.router.navigate(['/customer', key]);
}

  constructor(private route: ActivatedRoute) {
 this.route.params.subscribe(params => {
      this.id = params['key'];
    });
}