在Angular 6服务中获取当前路径参数的最佳方法是什么?

问题描述 投票:2回答:2

我试图找出在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 {
            ...
        }
    }
}
angular typescript angular-routing
2个回答
4
投票

既然你想要当前的路线参数,而不是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 {
            ...
        }
    }
}

0
投票

在大多数情况下,服务不应访问路由。 “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) 
    });
  }
}

来自https://stackoverflow.com/a/33548895/2085502的例子。

文件:https://angular.io/guide/router#router-events

© www.soinside.com 2019 - 2024. All rights reserved.