Question

您好我是Angular 2的新手。我必须为5个标签创建路线。我有5个代码用于这5个选项卡，我需要发送这些代码以从后端检索数据。我已经为这些代码提供服务。当我单击选项卡时，我需要通过服务发送该代码并检索并显示数据。我通过Angular 2 TypeScript完成所有这些工作。我不知道如何将此代码从路由发送到Angular 2服务。（同时我需要将此代码发送到后端web服务）我的webservice和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中的路由获取id的值，然后使用此id进行服务调用，如下所示：

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

确保您已完成所有导入：

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

此外，使用＆＃39; :＆＃39;时会使用占位符描述路线。如下：

{ 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

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

1 个答案: