2017-08-27 11 views
2

現在、オンラインゲームのUIであるAngular4アプリケーションを作成しています。このアプリの1つの機能として、電話機があります。電話機は、1台のプライマリルータのアウトレットと1台の補助ルータのアウトレットで構成され、ヒントを表示します。名前の付いたコンセントのおかげで、ユーザーは補助ルートが表示されている間にメインルート上をナビゲートすることができます。名前付きコンセントから名前付きコンセントへのルーティング - Angular4

スタンドアロンとして、電話機能は素晴らしい機能を発揮します。
全体アプリの構造は以下の通りである:

## root.component.html ## 
<router-outlet><router-outlet> 
<router-outlet name="phone"><router-outlet> // will load phone.component 
<router-outlet name="other-feature-1"><router-outlet> // will load feature.component 

全体アプリの経路がある:

## routes.module.ts ## 
const AppRoutes: Routes = [ 
    { 
     path: '', 
     component: MainComponent, 
     children: [ 
      ... 
     ] 
    }, 
    { 
     path: '', 
     component: PhoneComponent, 
     outlet: 'phone', 
     children: [ 
      { 
       ... non-outlet children 
      }, 
      { 
       path: '', 
       component: HintComponent, 
       outlet: 'hint' 
       children: [ 
        ... 
       ] 
      }, 
     ] 
    }, 
    { 
     path: '', 
     component: FeatureComponent, 
     outlet: 'other-feature', 
     children: [ 
     ... 
     ] 
    } 
]; 

電話成分の含有量:

## phone.component.html ## 
<router-outlet><router-outlet> 
<router-outlet name='hint'><router-outlet> 
<div>...graphic content..</div> 

主なアイデアそれは各機能には独自のルータ出力があり、必要に応じて同時にいくつかの機能を表示することができます。

しかし、電話機能の内部に名前付きルーターアウトレットを配置することができないため、UI全体でこの機能を統合することに成功しませんでした。ここには主要アウトレットといくつかの補助アウトレットが含まれています。

問題がです:
はどのように私は、補助コンセントから補助ルータのコンセントを取り込むことができますか?

ここでは、状況の抽象的な塊です。
のみ(たとえば<router-outlet name="phone"><router-outlet>用)単一機能ブランチを表します
http://plnkr.co/edit/o0DFop?p=preview

私はではなく、親の名前-コンセントから-アウトレット名前の子にthis.router.navigate([{outlets: {'phone': 'non-outlet-path'}}])で(子プライマリコンセントに親の名前コンセントからナビゲートするために管理。
上記plunkをご覧ください。

感謝。

+0

なぜあなたのパスは空ですか? – headshoT

答えて

0

お使いのコンセントの名前中にライン66上の、ちょうど不一致plunkr app.ts RE:

<router-outlet name="aux-nested"></router-outlet> 

は次のようになります。それは、経路設定(ライン95)とrouterlinkコンセント名でアウトレット名と一致するように

<router-outlet name="nested"></router-outlet> 

(ライン61)。

+0

何のばかげた間違いか。その素早い答えをありがとう。 – SerrurierJ

関連する問題