example - router.navigate angular 6

RC5: carga lenta de NgModule en diferentes enrutadores de salida

Question

Estoy usando el NgModule de RC5 para realizar la carga de ruta dinámica.

Mi aplicación tiene dos niveles de profundidad. Tengo rutas como:

• aplicación / inicio de sesión
• aplicación / tablero / módulo1
• app / dashboard / module2
• etc ...

Cada nivel de definición tiene su propio enrutador para que pueda definir el diseño personalizado en cada nivel. es decir, el inicio de sesión y el panel de control se muestran en la aplicación router-outlet, mientras que el módulo 1 y el módulo 2 se muestran en el panel de control router-outlet.

¿Cuál es la configuración para cargar dinámicamente cada ruta a pedido?

Answer 1

Aquí hay un ejemplo de trabajo mínimo de carga dinámica accoss NgModules y enrutador de salida.

app.module.ts

@NgModule({
    declarations: [AppComponent],
    imports: [
        RouterModule,
        routing],
    bootstrap: [AppComponent],
    providers: [
        // some providers
    ]
})

export class AppModule { }

app.component.ts

@Component({
  template: ''<router-outlet></router-outlet>''
})
export class BadAppComponent { }

El <router-outlet> donde /login y /dashboard van a ser distribuidos.

app.routes.ts

export const routes: Routes = [
    {path: '''', redirectTo: ''/login'', terminal: true},
    {path: ''login'', component: LoginComponent},
    {path: ''dashboard'', loadChildren: ''app/dashboard/dashboard.module#DashboardModule''}
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

loadChildren apunta al módulo que se cargará a demanda.

dashboard.module.ts

@NgModule({
    declarations: [
        DashboardComponent
    ],
    imports: [CommonModule, RouterModule, routing],
    exports: [DashboardComponent],
    providers: [
        // some providers
    ]
})
export class DashboardModule { }

dashboard.component.ts

@Component({
  moduleId: module.id,
  template: ''<div>sidebar left</div><router-outlet></router-outlet><div>sidebar right</div>'',
})
export class DashboardComponent {
  constructor() {}
}

<router-outlet> donde /dashboard/accounts y /dashboard/transfert se van a distribuir. No debe nombrar el enrutador-outlet

dashboard.routes.ts

export const routing: ModuleWithProviders = RouterModule.forChild([
    {path: '''', component: DashboardComponent,
        children: [
            { path: ''accounts'', loadChildren: ''app/dashboard/accounts/accounts.module#DashboardAccountsModule''},
            { path: ''virement'', loadChildren: ''app/dashboard/transfert/transfert.module#DashboardTransfertModule''}
        ]
    }

]);

children aseguran de que las rutas de los niños se carguen en el actual <router-outlet> es decir, el router-outler

accounts.module.ts

@NgModule({
    declarations: [
        AccountsFragment
    ],
    imports: [CommonModule, RouterModule, routing],
    exports: [AccountsFragment]
})
export class DashboardAccountsModule { }

accounts.routing.ts

export const routing: ModuleWithProviders = RouterModule.forChild([
    { path: '''', component: AccountsComponent}
]);

Este es el final de la ruta. Se mostrará en el enrutador de la salida del tablero porque es una ruta de escritorio para niños.

accounts.component.ts

@Component({
    moduleId: module.id,
    template: ''<div>Your accounts!!</div>''
})
export class AccountsComponents {
}

Eso es. Debería tener todo lo que necesita para estructurar su aplicación ''cargar sobre la marcha''. Espero eso ayude.