サブコンポーネント内にある名前付きルータのアウトレットのルートを定義する方法

Question

私はmain-appとadmin-appのような2つの異なるサブアプリケーションからなる角度4のアプリケーションを構築したいと考えています。 Iはブートストラップとなっているアプリケーションのコンポーネントを持っていることについて考えていた唯一のテンプレートで<router-outlet>：

app.component
テンプレート：<router-outlet></router-outlet>
経路：
「メイン」=>メインアプリ
"admin" => admin-app

main-appには、同時に異なるコンポーネントを表示したいテンプレートのルータアウトレットと名前付きルータアウトレットがあります。
主app.component
テンプレート：<router-outlet></router-outlet><router-outlet name='action'></router-outlet>
経路：（アクションルータ出口で表示）
"コンテンツ" => content.component
"アクション" => action.component

http://localhost:4200/main/app(action:action)または http://localhost:4200/main/app/content(action:action)にアクセスするとき、それは、アクションルータ・アウトレットで action.componentは表示されません。すなわち

私の問題は、「アクション」のルートが動作しないということですが、例外を与える：

Error: Cannot match any routes. URL Segment: 'action'

私の実際のルートは次のようになります。
アプリ-routing.module

const routes: Routes = [ 
    { 
    path: 'main', 
    loadChildren: "app/main-app/main-app.module#MainAppModule", 
    }, 
    { 
    path: 'admin', 
    loadChildren: "app/admin-app/admin-app.module#AdminAppModule", 
    }, 
] 

メインアプリ-routing.module

const routes: Routes = [ 
    { 
    path: "", 
    redirectTo: "app", 
    pathMatch: "full" 
    }, 
    { 
    path: "app", 
    component: MainAppComponent, 
    children: [ 
     { 
     path: "content", 
     component: ContentComponent 
     }, 
     { 
     path: "action", 
     outlet: "action", 
     component: ActionComponent 
     } 
    ] 
    } 
] 

私の質問：
方法それを動作させるために経路を指定する必要がありますか？
2つのサブアプリケーションで構成されるアプリケーションをビルドするためのもう1つの推奨方法はありますか？

ありがとうございました！

Answer 1

私はそれを達成することができた方法を考え出し：

URLを使用することにより：
http://localhost:4200/main/app/(content//action:action)
それは働きます！

そしてrouterLinkはこのように見ています
<a [routerLink]="['/main/app', { outlets: { primary: 'content', action: 'action' } }]" >content & action</a>

これは、主app.component.html次のとおりです。

<span><a [routerLink]="['/main/app', { outlets: { primary: 'content', action: null } }]" >content only</a></span> 
<span><a [routerLink]="['/main/app', { outlets: { primary: null, action: 'action' } }]" >action only</a></span> 
<span><a [routerLink]="['/main/app', { outlets: { primary: 'content', action: 'action' } }]" >content & action</a></span> 

<div>primary:</div> 
<div><router-outlet></router-outlet></div> 

<div>action:</div> 
<div><router-outlet name="action"></router-outlet></div> 

たぶん誰かが別の/よりよい解決策を知っていますか？

Answer 2

名前の付いたルータの代わりに、実際にネストされたルーティングコンポーネントがあります。したがって、あなたのメインのAppComponentはただ1つのルータ出口を持っています。

const routes: Routes = [ 
    { 
    path: 'main', 
    loadChildren: "app/main-app/main-app.module#MainAppModule", 
    }, 
    { 
    path: 'admin', 
    loadChildren: "app/admin-app/admin-app.module#AdminAppModule", 
    }, 
] 

ただし、2つのサブアプリケーション用に2つのモジュールを作成するようになりました。たとえば、MainAppは次のようになります。

const mainAppRoutes: Routes = [ 
    { 
    path: 'main', 
    component: MainAppComponent, 
    children: [ 
     { 
     path: "content", 
     component: ContentComponent 
     }, 
     { 
     path: "action", 
     outlet: "action", 
     component: ActionComponent 
     } 
    ] 
    } 


@NgModule({ 
    imports: [ 
    RouterModule.forChild(mainAppRoutes) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class MainAppModule { } 


@Component({ 
    template: ` 
    <h2>Main App</h2> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class MainAppComponent { } 

ルートにネストされた子ルートがあることに注意してください。これらのルートは、実際には、AppComponentのルータアウトレットではなく、MainAppComponentルータコンセントに接続されます。その後、RouterModule.forChild（）メソッドを使用して、これらのルートをMainAppModuleにインポートできます。この設定は私たちの怠惰な読み込みでも機能しますが、私はあなたの地域でよりクリーンな分離を与えると思います。