Передача строки в другой компонент Angular

Question

У меня есть список с большим количеством оборудования.У каждого снаряжения есть кнопка «Деталь».Если я нажму на эту кнопку, я хочу показать только информацию об этом конкретном оборудовании (например, передав серийный номер).Как я могу передать серийный номер после переключения между компонентами?

Вот мой HTML-код для первой страницы:

<div *ngFor="let equipment of equipments" class="card small card-small">
    <p>{{ equipment.equipmentName }}</p>
    <div class="container">
      <div class="card-content">
        {{ equipment.serialnumber }}
        <p>
          <a href="/equipDetail">Detalhes</a>
        </p>
        <p>
          <a (click)="open(modalcontent, equipment)">Editar</a>
        </p>
      </div>
    </div>
  </div>

/ equipDetail - это компонент, который я хочу показать после нажатия пользователем.Этот компонент должен иметь все данные об оборудовании, я могу получить эти данные с помощью http-вызовов, если сначала получу серийный номер.

Answer 1

Я предполагаю, что вы используете угловую маршрутизацию, поэтому вы можете просто определить параметр маршрутизатора следующим образом (предположим, что ваш компонент данных называется DetailsComponent):

Конфигурация маршрутизатора

....
{ path: 'equipDetail/:serialNum', component: DetailsComponent }
....

Выможно установить параметр перенаправления в html, используя <a>, например:

Link

....
<a [routerLink]="['/equipDetail', equipment.serialnumber]">Detalhes</a>
....

И вы можете прочитать его в DetailsComponent, например:

Использование параметра

....
constructor(private route: ActivatedRoute) {}
....
ngOnInit() {
   this.sub = this.route.params.subscribe(params => {
       const serialNum = params['serialNum'];
       // here you can use var serialNum to make a request to fetch data
   });
}

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