2017-07-26 10 views
0

私はアングル4のアプリケーションを作成しています。私は自分のURLからさまざまな深度レベルにあるパラメータを取得する必要があることが起こります。このパラメータは、私が自分のパラメータを取得できる方法では統一されていません。ActivatedRouteのすべてのパラメータを角度で集めることは可能ですか?

私たちは、このURLがあるとします。これは我々がDrawDetailComponent内にある検討していることを

ngOnInit() { 
this.activatedRoute.parent.parent.params.subscribe((params: Params) => 
{this.companyId = params['companyId']; 
}); 
this.activatedRoute.parent.params.subscribe((params: Params) => 
{this.cupId = params['cupId']; 
}); 
this.activatedRoute.params.subscribe((params: Params) => 
{this.drawId = params['drawId']; 
}); 
} 

注:

https://mysite/companies/:companyID/cups/:cupId/drawings/:drawId 

通常、角度のドキュメントによると、私たちは何かなどを行う必要があるでしょうこれは、この階層の最後の子であるコンポーネントにあることを意味します。

また、この階層の深さによっては、activateRouteに| subtract .parentを追加して、探しているパラメータを正常に取得できる正しい位置にある必要があります。

URLのすべてのパラメータを同じ呼び出しで使用することは可能ですか?私たちはURLからすべてのパラメータを取得するために、均一ではなく、深さに依存する方法を持っていると思い

this.activatedRoute.parent.parent.params.subscribe((params: Params) => 
    {this.companyId = params['companyId']; 
    {this.cupId = params['cupId']; 
    {this.drawId = params['drawId']; 
}); 

:よう

何か。

は、実は私たちも何かしようとした:

const property = 'companyId'; 
this.activatedRoute.pathFromRoot.forEach((item) => { 
    if (item.snapshot.params.hasOwnProperty(property)) { 
    item.params.subscribe((params: ParamMap) => { 
     this.companyId = params[property]; 
    }); 
    } 
}); 

をしかし、我々はより良​​い、より一般的な、検証可能な方法を見つけることを願っています。

通常、Djangoのようなフレームワークでは、開発者は1つのステップでURLから必要なすべての情報を収集することができます。 Angularの場合にはこれらのパラメータの変更を自動的に処理するサブスクリプションがあればOKですが、IMHOでは快適で+テスト可能ではありません。

+0

ここをクリックして親を反復することができます。あなたはフレームワークと戦っていますが、ルータはそのように使われることは想定されていません。角はDjangoではありません。開発者はA1ルータから難しいレッスンを学びました。 A4ルータはモジュラー型に設計されており、これはカプセル化の特別なケースと考えられます。子ルートは親を認識せず、 'データ'、自分のparams、共通のプロバイダを通じて必要なものをすべて受け取るべきです。あなたはおそらく別の方法で解決されるはずのアプリケーションの設計にXYの問題があります。 – estus

+0

ありがとう、面白い答え、別の方向、おそらくより適切な方向に私を指している。このXY問題を説明するリンクをいくつかご紹介ください。 一方、A、B、C、Dの4つのコンポーネントが前のコンポーネントの中にネストされているとします。 3つの親コンポーネント。各コンポーネントの内部で@Inputsを使用してデータを正しく共有する必要がありますか?Dコンポーネントは3つの入力を持つことになり、親からの単純なパラメータへのアクセスのみが可能になります。 – pinkfloyd

答えて

1

私はあなたがこのような何かを行うことができるはずだと思う

this.activatedRoute.params.subscribe(params => { 
    this.companyId = params['companyId']; 
    this.cupId = params['cupId']; 
    this.drawId = params['drawId']; 
}); 

私は私のアプリケーションでは、これに似たもので運を持っていました。私は親に行くつもりはないことに注意してください。活性化されたルートには、必要なものだけが必要です。

希望すると便利です。

+1

私は同意します。私は例外があることを知っている。しかし、人々がルーズなルーティング機能を求めているときには、ちょっと心配しています。動的ルーティングの使用例は間違いありませんが、動的にネストしている場所はあまり多くありません。アプリ全体の中で、あなたのルーティングは、設計通りの動作に関して最も予測可能で一貫している必要があります。 – joshrathke

+0

@ R。 Richards、これは私たちのために働いていません。ここにルートがネストされています。たとえば、子モジュールを持つCompanyModule(この場合はCupModule)というモジュールがあるとしましょう。それぞれCupModuleは独自のルーティングを持ちます。 CupModule内の任意のコンポーネントの内部からactivatedRouteを要求すると、親モジュールのルートは認識されません。そのため、この例では、深さに応じて、3つの異なるレベルの親ネストされたリクエストがあります。 – pinkfloyd

+0

@joshrathke、通常Djangoのようなフレームワークでは、簡単な呼び出しで必要なときにはいつでもすべてのパラメータを保持します。これはAngularの完全に成熟した機能ではないと私は思う。多分この質問にいくつかの答えを持っている私は私の心を変えるだろう:) – pinkfloyd

関連する問題