web-dev-qa-db-ja.com

Angular 6サービスで現在のルートパラメータを取得する最良の方法は何ですか？

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

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 {
            ...
        }
    }
}
7
SiddAjmera

ほとんどの場合、サービスはルーティングにアクセスしないでください。 「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

1
Christoph Lütjen