2016-10-11 7 views
8

コンポーネントで行うように、サービスでルートパラメータを取得するためにActivatedRouteを使用します。意図は、パラメータを使用することを http://plnkr.co/edit/sckmDYnpIlZUbqqB3gli角2.0.2:サービスでActivatedRouteが空です。

注:私はサービスにActivatedRouteオブジェクトを挿入するとき はしかし、それは私が動作を再現plunkerを作成しました

変数空のparamsが含まれていますサービスではなく、コンポーネントではなく、プランナーが設定されている方法は、純粋に問題を示すことです。

コンポーネント(testが検索された):

export class Component implements OnInit { 
    result: string; 

    constructor(private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.route.params.subscribe(params => { 
     this.result = params['test']; 
    }); 
    } 
} 

サービス(testが取得されないです):

export class Service { 
    result: string; 

    constructor(private route: ActivatedRoute) { 
    this.getData(); 
    } 

    getData() { 
    this.route.params.subscribe(params => { 
     this.result = params['test']; 
    }); 
    } 
} 
+0

サービスに経路を挿入することをお勧めします。 「サービス」はシングルトンです。 'ActivatedRoute'はそうではありません。私は 'ActivatedRoute'インスタンスがコンポーネントとサービスではまったく違うと思います。 – estus

+0

@estus意味が分かりますが、関数を介してparamをサービスに渡すことができます。しかし、これはclunkyと思われる。 –

答えて

8

Serviceは、インジェクタをrootに属し、root ActivatedRoute instanceを注射するシングルトンです。

アウトレットには独自のインジェクタとown ActivatedRoute instanceが割り当てられます。

The solution hereは、ルートコンポーネントは、独自のServiceインスタンスを持つようにすることです:複数のサービスインスタンスが問題でない場合

@Component({ 
    ... 
    providers: [Service] 
}) 
export class MainComponent { ... } 
+0

これは間違いなく解決策ですが、複数のシングルトンサービスを作成することには欠点があります。たとえば、このサービスがhttp要求を実行した後、結果をキャッシュすると、すべてのサービスインスタンスで実行されます。 –

+0

次に、これらのサービスは2つの異なるサービスになるはずです。 1つはシングルトンであり、もう1つは現在のルートに特有のものです。全体のパターンは、Angular 1ではほぼ同じでした。実際の設計上の問題がある場合は、自由に質問をコンテキストに更新してください。 – estus

+0

さて、私がここで説明した問題を解決したので、それをそのまま保ちます。私はサービスを分割することがそのトリックを行い、そうでないときに新しい問題を作り出すかどうかを考え出すでしょう。あなたの助けに多くのおかあさん –

0

私はあなたが提供するあなたのPlunkerコードでrouterLinkディレクティブを見ることができません。

routerLinkディレクティブを使用してコンポーネントにナビゲートする必要があります。このコンポーネントでは、パラメータを指定してから、取得することができます。例えば:ここ

<a routerLink="/myparam" >Click here to go to main component</a> 
+0

plunkerは '/ success'にリダイレクトされ、その後検索されます。追加のナビゲーションは不要です –

5

answer of estusは、優れたソリューションを提供します。

以下の溶液は、ルータから直接パラメータを取得し、サービスのインスタンス有することを可能にする:routerStateが利用できない場合、

代わり
export class Service { 
    result: string; 

    constructor(private router: Router) { 
    this.router.routerState.root.children[0].url.map((url) => { 
     this.result = url[index].path; 
    }); 
    } 
} 

export class Service { 
    result: string; 

    constructor(private router: Router) { 
    this.result = router.routerState.snapshot.root.children[0].url[index].path 
    } 
} 

や観察などを。

export class Service { 
    result: string; 

    constructor(private router: Router) { 
    this.router.parseUrl(this.router.url).root.children.primary.segments[index].toString(); 
    } 
} 

インデックスは、URLのparamの位置です。

関連する問題