javascript - 使用 Angular 路由器发送数据

Question

我有一个搜索框，您可以在其中从充满电视节目(及其相应 ID)的数组中进行搜索。

landingpage.component.html

 <li (click)="selectShow(list.show)" [routerLink]="['/details', list.id]" *ngFor="let list of shows"> </li>

当用户点击某个节目时，它会将该节目的 ID 作为参数传递给新路由，并加载我的 resultpage.component。 selectShow 函数仅记录所选节目的名称。

我的问题:

我想通过 Angular 路由器将显示 (list.show) 值发送到我的 resultpage.component。我似乎无法在文档中找到有关如何执行此操作的任何信息。

如何使用 Angular 路由器将我的 list.show 数据传递到我的 resultpage.component？

Answer 1

由于路由不会包含 list.id 以外的任何内容，因此您需要在访问 /details 链接时获取数据。

这通常是通过为数据创建Resolve来完成的

https://angular.io/api/router/Resolve

它的作用是在您访问 /details 之前检查您是否已为该路由注册了任何解析器。

然后您将能够从路由器获取该数据。

@Component()
export class DetailComponent implements OnInit {

  listDetails: Details;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.listDetails = this.route.snapshot.data['details'];
  }
}