Question

我正在尝试找出在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 {
            ...
        }
    }
}

Answer 1

由于您需要当前的路径参数，而不是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 {
            ...
        }
    }
}

Answer 2

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

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

2 个答案: