typescript - 在 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 {
            ...
        }
    }
}

答案＃1

既然你想要獲取當前的路由參數，那麼你應該訂閱 activatedRoute.params，而不是使用 activatedRoute.snapshot。它會給你當前路由參數的最新更新值。

您的服務方法不應該負責從 ActivatedRoute 獲取 id。這應該是您的 Component 的責任。您的服務應該只負責從 component 獲取 id，然後根據該 id 執行必要的操作。

你應該在你的組件中從 activatedRoute 提取 id。然後通過傳遞 id 調用服務方法

export class MainComponent {

    subscription;

    constructor(
        private dataService: DataService, 
        private activeRoute: ActivatedRoute
    ) { }

    getChartsData() {
        this.subscription = this.activeRoute.params.subscribe(params => {
            if(params['id']) {
                this.dataService.getChartsData(params['id'])
                    .subscribe(data => console.log(data));
            }
        })
        
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

在您的服務中

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

答案＃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）。但你可以注入 Router 本身並監聽導航事件：

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