触发下一个JSON项目

Question

我有一个带有过滤器的主要组件，并加载项目列表。 在其中一项上单击时，将加载我的详细信息组件。现在，我想在详细信息组件中创建一个按钮以切换到下一个或上一个项目。

有人可以指出我正确的方向吗？

我在main.component.html中的列表：

<table class="table table-striped">
   <thead>
     <tr>
       <td><strong>Nr</strong></td>
       <td><strong>Name</strong></td>
     </tr>
   </thead>
   <tbody style="overflow:scroll;">
      <tr routerLink="./{{item.id}}" <!-- this goes to my detail-component -->
          ngFor="let item of listItems; let i = index;"
          (click)="setClickedRow(i)"
          [class.active]="i == selectedRow">
          <td >{{item.number}}</td>
          <td>{{item.description}}</td>
      </tr>
    </tbody>
  </table>

<div class="col-sm-9 col-pd-ow grid-wo">
    <div class="row">
      <div class="col-sm-12 col-pd-ow">

        <!-- List view component -->
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>

我的路线：

const routes: Routes = [
  {
    path: '',
    component: ItemComponent,
    children: [
      { path: '', redirectTo: 'list' },
      { path: 'list', component: ListViewComponent},
      { path: ':id', component: DetailsViewComponent }
    ]
  }
];

在我的详细信息部分：

export class DetailsViewComponent implements OnInit, OnDestroy {

  subscription: Subscription;
  public id: number;
  public item = new Item();

  constructor(private route: ActivatedRoute, private itemService: ItemService) {}

  ngOnInit() {
    this.route.params.subscribe(
      params => {
        this.id = params['id'];
        this.itemService.get(this.id).subscribe(item => {
          this.item = item;
        });
      });
  }