각도 4에 중첩 된 라우터 - 아웃렛 사용

Question

내 라우터 구성 요소를로드하는 데 다중 라우터 - 아웃렛을 사용하고 있습니다. 외부 라우터 - 아웃렛은 login, home, 404와 같은 가장 기본적인 구성 요소를로드하는 데 사용됩니다. 중첩 된 라우터 - 콘센트를 사용하여 홈 페이지의 하위 구성 요소를로드했습니다. 해당 라우터 출력은 home.component 내부에 중첩되어 있습니다.

home.component.html

<app-header></app-header> 
<router-outlet name="homeRoute"></router-outlet> 
<app-footer></app-footer> 

app.module.ts

const appRoutes: Routes = [ 
    {path: '', component: HomeComponent, children: [ 
    {path: '', component: DashboardComponent, outlet: 'homeRouter'}, 
    {path: 'user', component: UserComponent, outlet: 'homeRouter'}, 
    {path: 'user/:id', component: UserdetailComponent, outlet: 'homeRouter'} 
    ]}, 
    {path: 'login', component: LoginformComponent}, 
    {path: '**', component: NotfoundComponent} 
]; 

HomeComponent LoginformComponent 및 상기 외부 라우터 출구에서로드 할 필요가있다. 홈 구성 요소에는 홈 페이지의 하위 구성 요소를로드하는 데 사용하려는 이름이 'homeRouter'인 내부 라우터 콘센트가 포함되어 있습니다. 하지만 내부 라우터 탐색이 작동하지 않습니다. router.navigate() 메서드를 사용하고 URL을 사용하여 각 구성 요소에 액세스하려고했습니다. 그러나 두 사람 모두 예상대로 작동하지 않았습니다.

누군가이 코드의 문제점을 말해 줄 수 있습니까? 같은 문제에 대한 몇 가지 이전 질문을 조사하고 시도했지만 아무도 잘 작동하지 않았습니다. 여기

내가 (이 작품)

http://localhost:4200/user userComponent (notFoundComponent에 나던 작동합니다. 경로)

http://localhost:4200/user/U001 userDetailComponent (work.still 경로를 doenst 다른 구성 요소

1. http://localhost:4200 dashboardComponet위한 노력의 URL입니다 ~ notFoundComponent로)

Answer 1

nesetd 라우트에는 이름이 지정된 router-outlet이 필요하지 않습니다. 경로에서 outlet: 'homeRouter'을 이동하고 라우터 출구에서 name="homeRoute"을 이동하면 제대로 작동합니다.

주 라우트와 함께 보조 라우트를로드 할 수 있도록 다중 라우터 콘센트가 필요한 경우, router-oulet의 이름은 outlet 등록 정보와 동일해야합니다. "homeRouter"및 이름 = "homeRoute"인 콘센트가있는 경로에는 동일해야합니다.

여기,

Plunker

import { NgModule, Component }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { Routes, RouterModule, ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello</h1> 
    <a routerLink="/" >Home</a> 
    <a routerLink="/admin" >Admin</a> 
    <a routerLink="/nonexistingroute" >Non existing Route</a> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class AppComponent { 
} 

@Component({ 
    template: `<h1>Home</h1> 
    <a routerLink="/" >Dashboard</a> 
    <a routerLink="/users" >Users</a> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
class HomeComponent {} 

@Component({ 
    template: `<h1>Admin</h1> 
    ` 
}) 
class AdminComponent {} 

@Component({ 
    template: `<h1>Dashboard</h1> 
    ` 
}) 
class DashboardComponent {} 


@Component({ 
    template: `<h1>Users</h1> 
    <a routerLink="user/1" >User 1</a> 
    <a routerLink="user/2" >User 2</a> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
class Users {} 


@Component({ 
    template: `<h1>User {{id}}</h1> 
    ` 
}) 
class UserdetailComponent { 
    id=''; 
    constructor(private route: ActivatedRoute) { 
    this.route.params.subscribe(params => { 
    this.id = params['id']; 
    }); 
    } 
} 

@Component({ 
    template: `<h1>Not found</h1> 
    ` 
}) 
class NotfoundComponent {} 


const appRoutes: Routes = [ 
    { path: '', 
    component: HomeComponent, 
    children: [ 
     {path: '', component: DashboardComponent}, 
     {path: 'users', component: Users, 
     children: [ 
      {path: 'user/:id', component: UserdetailComponent} 
     ] 
     } 
    ] 
    }, 
    { 
    path: 'admin', 
    component : AdminComponent 
    }, 
    {path: '**', component: NotfoundComponent} 
]; 

@NgModule({ 
    imports:  [ BrowserModule,RouterModule.forRoot(appRoutes) ], 
    declarations: [ AppComponent, HomeComponent,AdminComponent,NotfoundComponent, DashboardComponent, Users, UserdetailComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { } 

희망이 도움이 멀티 레벨의 중첩 된 경로와 완벽한 예입니다!