Каков наилучший способ получить текущие параметры маршрута в сервисах Angular 6?

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

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» должен загружать и возвращать диаграммы, которые идентифицированы чем-то (например, идентификатором). Помните: если вы обращаетесь к текущему маршруту непосредственно в службе, вы никогда не должны изменять имя параметра, потому что это нарушит вашу службу данных.

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