Angular 2中的路由将数据从路由/ HTML传递到组件

Question

您好，我是 Angular 2 的新手。我必须为 5 个选项卡创建路由。我有这 5 个选项卡的 5 个代码，我需要发送这些代码以从后端检索数据。我已经为这些代码提供了服务。当我单击一个选项卡时，我需要通过服务发送该代码并检索和显示数据。我正在通过 Angular 2 TypeScript 完成所有这些工作。我不明白如何将此代码从路由发送到 Angular 2 服务。（同时我还需要将此代码发送到后端 Web 服务）我的 Web 服务和 Angular 2 服务正在运行并提供数据输出当我通过一些试用输入代码时。我需要将代码作为数字传递，如下所示。

HTML
<a id="item1" [routerLink]="['/item1', 1]"> item1 </a>
<a id="item2" [routerLink]="['/item2', 2]"> item2 </a>
<a id="item3" [routerLink]="['/item3', 3]"> item3 </a>
<a id="item4" [routerLink]="['/item4', 4]"> item4 </a>
<a id="item5" [routerLink]="['/item5', 5]"> item5 </a>

Routes
{ path: 'items/:1', component: ItemsComponent },
{ path: 'items/:2', component: ItemsComponent },
{ path: 'items/:3', component: ItemsComponent },
{ path: 'items/:4', component: ItemsComponent },
{ path: 'items/:5', component: ItemsComponent },

Component.ts

Answer 1

你可以从ngOnInit里面的route获取id的值，然后使用这个id进行服务调用，如下：

ngOnInit() {
  let id = this.route.snapshot.paramMap.get('id');
  this.data = this.service.getData(id);
}

确保您已准备好所有导入：

import { ActivatedRoute, ParamMap } from '@angular/router';

此外，使用“:”时，路由使用占位符描述如下：

{ path: 'item/:id', component: ItemsComponent }

或者，如果您必须手动描述每条路线，则不要使用: 并编写如下。

{ path: 'item/1', component: ItemsComponent }
// and so on for 2,3,4,5
// NOT RECOMMENDED THOUGH | THIS IS BAD PRACTICE