web-dev-qa-db-fra.com

Quelle est la meilleure façon d'obtenir les paramètres de route actuels dans les services Angular 6?

J'essaie de savoir quelle est la meilleure façon d'obtenir les paramètres de route actuels dans Angular 6.

Pour le moment, je dois passer le ActivatedRoute à la méthode du service comme argument, puis l'utiliser dans le service.

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 {
            ...
        }
    }
}
angulartypescriptangular-routing
6
SMH

Puisque vous voulez les paramètres de route actuels, au lieu de activatedRoute.snapshot, vous devez vous abonner à activatedRoute.params. Il vous donnera la valeur la plus récente et la plus récente des paramètres d'itinéraire actuels.

Votre méthode de service ne doit pas être responsable de l'obtention du id du ActivatedRoute. Cela devrait être la responsabilité de votre Component. Votre service doit uniquement être responsable de l'obtention du id du component, puis faire le nécessaire en fonction de ce id.

Vous devez extraire l'id du activatedRoute de votre composant. Et puis appelez la méthode de service en lui passant le 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));
            }
        })

    }
}

Et à votre service

@Injectable({
  providedIn: "root"
})
export class DataService {
    getChartsData(id) {
        if (id) {
            ...
        } else {
            ...
        }
    }
}
7
SiddAjmera

Dans la plupart des cas, les services ne doivent pas accéder au routage. Un "ChartDataService" devrait charger et renvoyer des graphiques qui sont identifiés par quelque chose (par exemple un identifiant). N'oubliez pas: si vous accédez directement à l'itinéraire actuel dans le service, vous ne devez jamais modifier le nom du paramètre car cela interromprait votre service de données.

export class ChartDataService {
  getChart(id: string) { … }
}

// in your component
const chartId = // read from activated route
this.chartsService.getChart(chartId);

Si vous voulez vraiment accéder à l'itinéraire actuel dans un service, vous ne pouvez pas injecter ActivatedRoute (c'est par conception voir par exemple https://github.com/angular/angular/issues/12884 ). Mais vous pouvez injecter le routeur lui-même et écouter les événements de navigation:

class MyClass {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
        // see also 
        console.log(val instanceof NavigationEnd) 
    });
  }
}

Exemple de https://stackoverflow.com/a/33548895/2085502 .

Documents: https://angular.io/guide/router#router-events

1
Christoph Lütjen