angested 5 중첩 된 페이지의 다중 라우터 - 출구

문제는 하위 페이지에 여러 개의 라우터 출력을 갖는 중첩 된 라우터 아웃렛의 조합입니다. Active.Module : 단순화하기 위해, 나는에angested 5 중첩 된 페이지의 다중 라우터 - 출구

<h3>HOME COMPONENT (Splash Page)</h3> 
<a [routerLink]="['/activeRoot']">Login</a>

로그인 후가는 "로그인"링크를 하나의 홈 페이지가 있습니다. 이것은 여러 영역 (라우터 - 아웃렛)을 가질 수있는 메인 페이지와 같으며 각각 다른 작업 (구성 요소)을 수행합니다. > 로그인 "시작 페이지" 활성 루트 - - 가정 무엇>이 될 수있는 메인 페이지 프로젝트

홈 : Active.html : 브라우저에서

<h3>ACTIVE COMPONENT - main overwrites Splash</h3> 
<div [ngStyle]="{'display': 'flex', 'flex-direction': 'row'}"> 
    <div [ngStyle]="{'border': '1px solid green', 'margin': '20px'}"> 
    <ul> 
     <li> 
     <a routerLink='/home'>Home</a> 
     </li> 
     <li> 
     <a routerLink='/activeRoot'>Active Root</a> 
     </li> 
     <li> 
     <a routerLink='ProjectMgmt'>Project Management</a> 
     </li> 
     <li> 
     <a routerLink='Execution'>Execution</a> 
     </li> 
     <li> 
     <a routerLink="[ 'ProjectMgmt', {outlets: {'secondaryOutlet': ['Secondary']}]">SECONDARY</a> 
     </li> 
    </ul> 
    </div> 
    <div [ngStyle]="{'border': '1px solid maroon', 'min-width': '500px', 'height': '80px', 'margin': '20px', 'padding': '20px' }"> 
    <router-outlet></router-outlet> 
    </div> 
    <div [ngStyle]="{'border': '1px solid maroon', 'min-width': '500px', 'height': '80px', 'margin': '20px', 'padding': '20px' }"> 
    <router-outlet name="secondaryOutlet"></router-outlet> 
    </div> 
</div>

, 그것은 다음과 같습니다 명명되지 않은 라우터 콘센트에 관리가 표시됩니다. 명명되지 않은 라우터 콘센트에 실행이 표시됩니다. SECONDARY가 문제가되는데 ... 명명 된 콘센트에 표시되지 않습니다.

응용-routing.module과 같이 정의 노선이있다 : I 보조 링크를 클릭하면

const routes: Routes = [ 
    {path: '', redirectTo: 'home', pathMatch: 'full'}, 
    {path: 'home', component: HomeComponent}, 
    {path: 'activeRoot', component: ActiveComponent, children: [ 
    {path: 'ProjectMgmt', component: ProjectMgmtComponent}, 
    {path: 'Execution', component: ExecutionComponent }, 
    {path: 'Secondary', component: SecondaryComponent, outlet: 'secondaryOutlet' } 
    ]}, 
    {path: '**', component: InvalidPageComponent} 
];

을, 경로는 InvalidPageComponent 경로를 복용 끝납니다.

유일한 요구 사항

나는이 실제 응용 프로그램으로 전환 할 때 :

A) 컨텐츠 물론 필요에 따라 ("전역"응용 프로그램 라우터 콘센트에 나타납니다) 부모 페이지의 일부 수.

b) 이러한 페이지 중 한 샘플 (예 : 활성)은 왼쪽 녹색 상자와 같은 '정상'콘텐츠를 가지고 있습니다.

c) 페이지의 일부 영역 (이름이 지정되지 않은 라우터 및 이름이 지정된 라우터 콘센트)에는 해당 페이지와 관련된 다른 하위 구성 요소의 내용이 포함됩니다.

나는 모든 행성을 시험해 보았다고 생각하지만 행운을 빈다. 귀하의 도움에 감사드립니다. 미리 감사드립니다.

출처

2017-12-15 Yogi Bear

좋아

요기, 나는 그것을 알아 냈다. 약간의 번거 롭긴하지만, 실제 응용 프로그램에서는 앵커보다는 버튼을 사용하는 것이 더 낫습니다 (또는 선택 항목을 클릭 할 때 최소한 함수로 이동하는 것). 현실에서는 URL을 문자열로 모아서 탐색해야하기 때문에 이것을 말합니다.

첫째,이 같은 경로에있는 각 아이에게 특정 매장을 추가

const routes: Routes = [ 
    {path: '', redirectTo: 'home', pathMatch: 'full'}, 
    {path: 'home', component: HomeComponent}, 
    {path: 'activeRoot', component: ActiveComponent, children: [ 
    {path: 'ProjectMgmt', component: ProjectMgmtComponent, outlet: 'primaryOutlet'}, 
    {path: 'Execution', component: ExecutionComponent, outlet: 'primaryOutlet' }, 
    {path: 'Secondary', component: SecondaryComponent, outlet: 'secondaryOutlet' } 
    ]}, 
    {path: '**', component: InvalidPageComponent} 
];

을 내 앵커에서 두 프로젝트 관리 및 실행에 변경 :

<li> 
    <a [routerLink]="['/activeRoot', { outlets: { 'primaryOutlet': ['ProjectMgmt'], 'secondaryOutlet': ['Secondary']}}]">Project Management</a> 
    </li> 
    <li> 
    <a [routerLink]="['/activeRoot', { outlets: { 'primaryOutlet': ['Execution'], 'secondaryOutlet': ['Secondary']}}]">Execution</a> 
    </li>

이 제대로 채워 볼 수 있듯이 각 콘센트는 왼쪽 또는 오른쪽 콘센트에 대한 새 구성 요소를 선택할 수 있으므로 탐색 할 경로를 계산해야합니다.

출처

2017-12-15 23:13:58

angested 5 중첩 된 페이지의 다중 라우터 - 출구

답변

관련 문제