Question

我有一个组件SportComponent，它显示了一项运动比赛列表。我已经定义了一个Routes数组：

＆＃13;

export const appRoutes: Routes = [
  { path: 'sport/:id', component: SportComponent }
];

＆＃13;

在我的app.html中，我将routerLinks定义为：

＆＃13;

 <li><a routerLink="/sport/1" routerLinkActive="active">Soccer</a></li>
<li><a routerLink="/sport/2">Rugby</a></li>

＆＃13;

在我的SportComponent组件中，我从webservice中检索运动竞赛列表并在视图中显示。我在ngOnInit（）方法中这样做，当我从一个不同的组件导航到SportComponent时工作正常。我想知道如何从/ sport / 1导航到/ sport / 2，反之亦然，每次检索一个新列表？我可以使用钩子/回调来实现这个目的吗？或者我应该重新考虑我的设计？

Answer 1

在SportComponent中，您需要订阅ActivatedRoute.params可观察对象。每当params改变时（即当你第一次进入/ sports / 1，当你从/ sports / 1切换到/ sports / 2时）它会发出一个事件。

因此，当它发出时，请参加从Params事件中提取的新运动ID的比赛。

Answer 2

尝试以下，

@Component({
  template: `<h1>Sport {{id}}</h1>
    <li><a routerLink="/sport/1" routerLinkActive="active">Soccer</a></li>
    <li><a routerLink="/sport/2">Rugby</a></li>
  `
})
export class SportComponent { 
  id;
  constructor(private route: ActivatedRoute){
    this.route.params.subscribe(param => {
       this.id = param.id;
      //
      // do your action to get new list
      //         
    })
  }
}

选中此Plunker!!

希望这会有所帮助!!

使用RouterModule使用2个路由导航到一个组件

2 个答案: