将字符串传递到另一个组件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 }
....

您可以使用<a>在html中设置重定向参数，例如：

链接

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

希望有帮助。