2016-12-28 7 views
1

私はエントリページとしてプロジェクトの概要を持っています。トップレベルのルートIDを他のトップレベルルートに渡します。子ルートと同様に

プロジェクトを開くボタンをクリックすると、projectIdがMilesstonesビューに渡されます。私がマイルストーンビューに入っているときに、私はprojectIdを使ってTasksビューをアクティブにしたいと思っています。

このシナリオは、マイルストーン/タスクが子ルートになると簡単に可能ですが、そうではありません。 3つのビューはすべてトップレベルのルートに属します。

子ルートを使用するAFAIKは、コンポーネントがui階層の子でなければならないことを意味し、3つのパラレル/サイドサイドビューを持つことはできません。

他にどのようにして達成できますか?

enter image description here

答えて

0

サービスを作成し、3つの成分のそれぞれに注入。

このサービスの内部では、メソッドsetProject(projectID)とgetProject()を作成します。ユーザーがボタンをクリックして開くと、選択したプロジェクトを通過するサービスでこのメソッドが呼び出されます。

メソッド内では、選択したprojectIDをクラス変数に格納し、EventEmitter型のクラスvarを使用すると、選択したprojectIDをペイロードとして持つイベントが送出されます。

他の2つのコンポーネントのコンストラクタでは、サービス上ですぐにgetProject()を呼び出し、そのEventEmitterにサブスクライブします。

このようにして、ユーザーがマイルストーンまたはタスクのリンクをクリックすると、プロジェクトIDが取得されます。さらに、ユーザーが別のプロジェクトを選択して他のルートの1つがアクティブな場合、新しい値はサブスクリプションを介してその基礎となるコンポーネントで使用可能になります。

+0

私は今朝、シングルトンサービスについて同じ考えをしました。しかし、私はあなたの最後の段落を理解していませんでした。ユーザーが別のルートにいる間にUIで別のプロジェクトを選択するにはどうすればよいですか? – Pascal

+0

これはあなたのケースではないかもしれませんが、リンク先にマイルストーンやタスクが表示されている間に、ランディングページにプロジェクトのリストを保存することは可能です。この場合、同時にプロジェクトとマイルストーン(またはタスク)がUIに表示されることがあります。 –

+0

コンストラクタとしないがためngOnInit理由があります:。 this.projectsStore.observer.asObservable()はサブスクライブ(P => { this.projectsId = P; アラート(P); })。 – Pascal

関連する問題