Регенерация ребенка с использованием угловых 2

Question

Я очень много нового для углового 2. Я пытался создать простое приложение со страницами входа и страницы. Мне нужно понять, как применять маршрутизацию по мере необходимости.

Страница входа - это независимая конфигурация маршрута, но я хочу, чтобы при использовании входа в систему новая страница новой панели была оснащена навигационной панелью и ее собственным <router-outlet>.

const routes: Routes = [ 
    { path: '', redirectTo: 'login', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register-user', component: RegisterUserComponent }, 
    //APPLICATION ROUTES WITH OWN <router-outlet> 
    { path: '**', redirectTo: 'login' } 
] 

Ранее в угловых 1, мы использовали UI-маршрутизатор с абстрактными состояниями и дочерними состояниями.

Просьба предложить, как мы можем это сделать.

Answer 1

Рабочая plunkr

https://plnkr.co/edit/MqNv6RyQvzsiZTp0Dkpf?p=preview

Создать один ContainerComponent & он должен держать свой собственный маршрутизатор розетки & routerLinks.

По умолчанию всегда загружать в anyComponent используя RedirectTo

{ path: 'component-two', component: ComponentTwo, 
    children: [ 
     { path: '', redirectTo: 'child-one', pathMatch: 'full' }, 
     { path: 'child-one', component: ChildOne }, 
     { path: 'child-two', component: ChildTwo } 
    ] 
    } 

Answer 2

Пусть и есть подмодуль внутри основного модуля.
Так App и модуль к югу Войти

структура каталогов основного модуля

app.routing.module.ts что-то выглядит как этот

export const routes: Routes = [ 
    { path: '', component:LoginComponent, pathMatch: 'full'}, 
    { path: Constants.LOGINROUTE, component:LoginComponent, pathMatch: 'full'} 
    ]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes,{ useHash: true })], 
    exports: [RouterModule] 
}) 

и c исследования соответствующего login.routing.module.ts

@NgModule({ 
    imports: [RouterModule.forChild([ 
    { path: Constants.LOGINROUTE, component: LoginComponent} 
    ])], 
    exports: [RouterModule] 
}) 
export class LoginRoutingModule {} 

и dashboard.routing.module.ts будет выглядеть следующим образом

@NgModule({ 
    imports: [RouterModule.forChild([ 
    { path: Constants.DASHBOARDROUTE, component: DashboardComponent} 
    ])], 
    exports: [RouterModule] 
}) 
export class DashboardRoutingModule {} 

correspoding включает login.routing.module.ts в login.module.ts и то же самое для dashboard.routing.module.ts

Answer 3

Я сделал это в своем проекте.

Это используется для ленивой загрузки для детского маршрута:

Вы должны использовать loadChildren как это в вашей основной app-routing.module.ts:

{ path: 'crisis-center', 
    loadChildren: 'app/modules/crisis-center/crisis.module#CrisisCenterModule' 
}, 

И затем удалить component из ваших app-module.ts file в ниже коде:

приложение.module.TS:

@NgModule({ 
     imports: [ RouterModule.forRoot(routes, { useHash: true }) 
     // ,AdminModule 
     ], 
     declarations: [ ], 
     providers: [ ], 
     bootstrap: [ AppComponent ] 
    }) 

приложение-routing.module.ts:

export const routes: Routes = [ 
    { path: 'dashboard',     component: DashboardComponent }, 
    { path: 'admin', 
    loadChildren: 'app/admin/admin.module#AdminModule' 
    }, 
    { path: 'crisis-center', 
    loadChildren: 'app/modules/crisis-center/crisis.module#CrisisCenterModule' 
    }, 
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 
    { path: '**',       component: PageNotFound}, 

]; 

Теперь fine.When в router переходит к этому маршруту, он использует loadChildren строку динамически загружать AdminModule. Затем он добавляет маршруты AdminModule к его текущей конфигурации маршрута. Наконец, он загружает запрошенный маршрут в целевой админ-компонент.

Вы можете также использовать это (дети []) в файле routing и может дать отдельный компонент для каждого ребенка маршрутов:

const crisisCenterRoutes: Routes = [ 
    { 
    path: '', 
    component: CrisisCenterComponent, 
    children: [ 
     { 
     path: '', 
     component: CrisisListComponent, 
     children: [ 
      { 
      path: ':id', 
      component: CrisisDetailComponent, 
      canDeactivate: [CanDeactivateGuard] 
      }, 
      { 
      path: '', 
      component: CrisisCenterHomeComponent 
      } 
     ] 
     } 
    ] 
    } 
]; 

А затем добавить все компоненты в вашей module.ts файл, как это:

import { NgModule     }  from '@angular/core'; 
import { CommonModule    }  from '@angular/common'; 
import { FormsModule    }  from '@angular/forms'; 
import { CrisisCenterRoutingModule }  from './crisis-center-routing.module'; 
import { CrisisCenterComponent  }  from './crisis-center.component'; 
import { CrisisListComponent  }  from './crisis-list.component'; 
import { CrisisDetailComponent  }  from './crisis-detail.component'; 
import { CrisisCenterHomeComponent }  from './crisis-center-home.component'; 
import { CrisisService    }  from './crisis.service'; 

@NgModule({ 
    imports: [ CommonModule,CrisisCenterRoutingModule,FormsModule, ], 
    declarations: [CrisisCenterComponent ,CrisisListComponent,CrisisDetailComponent,CrisisCenterHomeComponent ], 
    providers: [ CrisisService ], 
}) 

export class CrisisCenterModule {}