Я реализую приложение crud, используя angular и данные базы данных firebase в реальном времени в url, например, http://localhost: 4200 / customer / {key value}

Question

<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>

Это компонент списка клиентов. После нажатия на кнопку «Изменить форму» заполните клиентский компонент, поэтому при редактировании мне нужен ключ определенной записи в URL.

как передать значение ключа в URL?

Answer 1

Вы можете объявить маршрут с параметрами, подобными этим:

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

При нажатии на кнопку вызывать функцию вызова в файле ts и перемещаться по ней, используя строку ниже

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

ИЛИ

В шаблоне вы также можете сделать

<button  [routerLink]="['/customer', key]">clickB</button>

В вашем случае вам нужно создать кнопку с событием клика в шаблоне (html), например

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

и в файле ts обрабатывать нажатие кнопки

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

Надеюсь, это поможет вам

Сообщите мне, если возникнет какая-либо проблема

спасибо