Angular 2在服務中獲取routeParams

我想將邏輯從組件轉移到服務。但是我發現我無法獲得服務中的routeParams。Angular 2在服務中獲取routeParams

我的組件看起來像

import { Component, OnInit }  from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 

import { MyService }    from '../services/my.service'; 

@Component({ 
    moduleId: module.id, 
    templateUrl: 'my.component.html', 
    styleUrls: ['my.component.css'] 
}) 
export class MyComponent implements OnInit { 
    constructor(private myService: MyService, private route: ActivatedRoute) {;} 

    public ngOnInit() { 
    this.route.params 
     .subscribe((params: Params) => { 
     debugger; 
     console.log(params); 
     }); 
    this.myService.getParams() 
     .subscribe((params: Params) => { 
     debugger; 
     console.log('Return1:'); 
     console.log(params); 
     }, (params: Params) => { 
     debugger; 
     console.log('Return2:'); 
     console.log(params); 
     },() => { 
     debugger; 
     console.log('Return3:'); 
    }); 
    } 
};

我的服務看起來像

import { Injectable }      from '@angular/core'; 
import { Params, ActivatedRoute }   from '@angular/router'; 

import { Observable }      from 'rxjs'; 

@Injectable() 
export class MyService { 
    constructor(private route: ActivatedRoute) {;} 

    public getParams(): Observable<Params> {  
    this.route.params.subscribe((params: Params) => { 
     debugger; 
     console.log('Service1:'); 
     console.log(params); 
    }, (params: Params) => { 
     debugger; 
     console.log('Service2:'); 
     console.log(params); 
    },() => { 
     debugger; 
     console.log('Service3:'); 
    }); 
    return this.route.params; 
    } 
};

當我調試，我可以看到PARAMS填充在組件和服務的空白。這就是結果

Component: 
Object {param: "1"} 
Service1: 
Object {} 
Return1: 
Object {}

我使用的是Angular 2.0.0。爲什麼組件和服務有所不同？是否有可能在服務中獲得參數？

編輯： https://github.com/angular/angular/issues/11023

來源

2016-10-24 Thomas Sablik

您是否嘗試完成訂閱方法的部分？ – Lonely

我加了onError和onComplete，但函數沒有執行。我嘗試3次獲得參數。一旦直接在組件中，一次直接在服務中，一次在組件中作爲服務返回。只有第一次嘗試。 –

我們可以通過ActivatedRoute從組件服務。然後訂閱服務類中的route.params

來源

2016-10-24 14:40:53 Eswar

是的，這就是我現在正在做的方式。但這是一種解決方法。這樣我們在組件中就有了邏輯，我們必須將這個邏輯實現到我想要使用此服務的每個組件中。爲什麼在服務中不可能這樣做？ –

服務在應用程序啓動時被初始化，然後我們在任何需要的地方注入組件。組件根據路由更改進行初始化，並且ActivatedRoute屬於組件。這是基於我的理解。 – Eswar

問題描述如下： https://github.com/angular/angular/issues/11023 –

問題是

return this.route.params;

路線PARAMS不準備在那一刻 - >觀測 - >異步

來源

2016-10-24 13:45:34 Lonely

'this.route.params'是可觀察的，所以我返回一個可觀察對象，並且我訂閱了這個可觀察對象。此外，正如你所看到的，它也不適用於服務。爲什麼？ –

你能把它放進plnkr嗎？ – Lonely

我不知道如何。 –

根據this，您必須遍歷路由樹並從樹的底部獲取路由中的數據。

@Injectable() 
export class MyService{ 

    constructor(private router:Router,private route:ActivatedRoute){ 
    this.router.events 
    .filter(event => event instanceof NavigationEnd) 
    .subscribe((event) => { 
     let r=this.route; 
     while (r.firstChild) { 
      r = r.firstChild 
     } 
     //we need to use first, or we will end up having 
     //and increasing number of subscriptions after each route change. 
     r.params.first().subscribe(params=>{     
      // Now you can use the params to do whatever you want 
     });    


    });    
    } 
}

來源

2017-12-16 19:18:57 juansb827

Angular 2在服務中獲取routeParams

回答

相關問題