我试图找出在Angular 6中获得当前路线参数的最佳方法。
目前我必须将ActivatedRoute
作为参数传递给服务的方法,然后在服务中使用它。
export class MainComponent {
constructor(private dataService: DataService, private activeRoute: ActivatedRoute) { }
getChartsData() {
return this.dataService(this.activeRoute);
}
}
@Injectable({
providedIn: "root"
})
export class DataService {
getChartsData(activatedRoute) {
if (activatedRoute.snapshot.params['id']) {
...
} else {
...
}
}
}
既然你想要当前的路线参数,而不是activatedRoute.snapshot
,你应该订阅activatedRoute.params
。它将为您提供当前路线参数的最新和更新值。
您的服务方法不应该负责从id
获取ActivatedRoute
。这应该是你的Component
的责任。您的服务应该只负责从id
获取component
然后根据id
做必要的。
您应该从组件中的activatedRoute
中提取id。然后通过传递id
来调用服务方法
export class MainComponent {
constructor(
private dataService: DataService,
private activeRoute: ActivatedRoute
) { }
getChartsData() {
this.activeRoute.params.subscribe(params => {
if(params['id']) {
this.dataService.getChartsData(params['id'])
.subscribe(data => console.log(data));
}
})
}
}
并在您的服务
@Injectable({
providedIn: "root"
})
export class DataService {
getChartsData(id) {
if (id) {
...
} else {
...
}
}
}
在大多数情况下,服务不应访问路由。 “ChartDataService”应该加载并返回由某些内容标识的图表(例如id)。请记住:如果直接在服务中访问当前路由,则必须永远不要更改参数名称,因为这会破坏您的数据服务。
export class ChartDataService {
getChart(id: string) { … }
}
// in your component
const chartId = // read from activated route
this.chartsService.getChart(chartId);
如果您真的想要访问服务中的当前路由,则无法注入ActivatedRoute(这是设计参见https://github.com/angular/angular/issues/12884)。但是你可以注入路由器本身并监听导航事件:
class MyClass {
constructor(private router: Router) {
router.events.subscribe((val) => {
// see also
console.log(val instanceof NavigationEnd)
});
}
}