하위 구성 요소에있는 명명 된 라우터 콘센트에 대한 경로를 정의하는 방법

Question

main-app 및 admin-app와 같은 두 가지 하위 응용 프로그램으로 구성된 각도 4 응용 프로그램을 만들고 싶습니다. 나는 부트 스트랩과 가지고있다 앱 성분을 갖는 생각에만 템플릿의 <router-outlet> :

app.component
템플릿 : <router-outlet></router-outlet>
경로 :
"주"=> 메인 응용 프로그램
"admin"=> admin-app

main-app에는 다른 구성 요소를 동시에 표시하려는 템플릿에 라우터 출력과 이름이 지정된 라우터 출력이 있습니다. (작용 라우터 출구 표시)
'콘텐츠'=> content.component
'액션'=> action.component

:
주 app.component
서식 : <router-outlet></router-outlet><router-outlet name='action'></router-outlet>
노선

내 문제는 "동작"경로가 작동하지 않습니다. 즉, http://localhost:4200/main/app(action:action) 또는 http://localhost:4200/main/app/content(action:action)에 액세스 할 때 작업 라우터 - 콘센트에 action.component를 표시하지 않지만 예외를 제공합니다.

앱 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 
     } 
    ] 
    } 
] 

내 질문 :

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

내 실제 경로는 다음과 같이
방법 작동하게하려면 경로를 지정해야합니까?
두 개의 하위 응용 프로그램으로 구성된 내 응용 프로그램을 빌드하는 또 다른 권장 방법이 있습니까?

감사합니다.

Answer 1

나는 그것을 달성 할 수있는 방법을 알아 냈 :

URL을 사용하여 :
http://localhost:4200/main/app/(content//action:action)
가 작동!

<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> 

어쩌면 누군가가 또 다른/더 나은 솔루션을 알고 :
<a [routerLink]="['/main/app', { outlets: { primary: 'content', action: 'action' } }]" >content & action</a>

이것은 메인 app.component.html은 다음과 같습니다

그리고 routerLink는 다음과 같이한다?

Answer 2

명명 된 라우터 콘센트가있는 대신 실제로 중첩 라우팅 구성 요소가 있습니다. 따라서 주요 AppComponent에는 라우터 출력이 하나만 있습니다.그리고 앱 라우팅 당신이 그것을 가지고있는 방법이 괜찮 :

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

하지만 지금 당신은 두 개의 하위 애플 리케이션을위한 두 개의 별도의 모듈을 만들 수 있습니다. 예를 들어, 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로 가져올 수 있습니다. 이 설정은 우리의 게으른 로딩과 함께 작동 할 것이며, 나는 당신이 당신의 지역에서 더 깨끗한 분리를 할 것이라고 생각합니다.