example - router events angular 6

Nueva configuración de enrutador Angular2

Question

Cuando usaba el enrutador obsoleto, pude hacer un router.config y pasar un objeto. La cosa es que el enrutador se configuró un poco después de que se inició la aplicación, el objeto tenía la misma "plantilla" que si hubiera usado @RouterConfig. Lo que estoy buscando es si hay una forma de configurar el nuevo enrutador de esta manera. He estado revisando la documentación, pero estoy un poco perdido ya que aún no está documentado.

Editar debido a respuesta

No, no puedo usar @Routes. La cosa es que estoy cargando la configuración después de la construcción del enrutador. Aquí hay un fragmento de cómo lo hice con el viejo enrutador:

       myLoader.loadComponentConfig(configPath)
      .then(components => { self.Components = components;
         components.map(comp => {
             self.RouterComponents.push(
                 {
                     path: ''/'' + comp.name,
                     component: comp,
                     as: comp.name
                 }
             )});
             router.config(self.RouterComponents);
        });

Como puede ver, estoy construyendo un objeto json (RouterComponents) y luego enviándolo al enrutador. Estoy buscando una forma de hacer lo mismo con el nuevo enrutador, o algo por el estilo.

Answer 1

Creo que es mejor así:

En main.ts:

import { ROUTER_PROVIDERS } from ''angular2/router'';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

En tu component.ts:

import { Router, RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from ''angular2/router'';
import { APP_ROUTES } from ''./route.config'';

@RouteConfig(APP_ROUTES)

Y crea un archivo route.config.ts:

import { Route } from ''angular2/router'';

import { HomeComponent } from ''./home/home.component'';
import { TableComponent } from ''./table/table.component'';

export var Routes = {
    home: new Route({
        path: ''/home'',
        component: HomeComponent,
        name: ''Home'',
        useAsDefault: true,
        data: {
            title: ''Home''
        }
    }),
    table: new Route({
        path: ''/table/:table'',
        component: TableComponent,
        name: ''Table''
    })
};

export const APP_ROUTES = Object.keys(Routes).map(r => Routes[r]);

Answer 2

De hecho, en resumen, necesita utilizar @Routes lugar de @RouterConfig . Aquí hay una muestra:

@Routes([
  {path: ''/crisis-center'', component: CrisisListComponent},
  {path: ''/heroes'',        component: HeroListComponent},
  {path: ''*'',        component: CrisisListComponent}
])
export class AppComponent { }

Consulte este documento en angular.io para obtener más detalles:

• https://angular.io/docs/ts/latest/guide/router.html

Puedes notar que sigue habiendo algunos errores tipográficos en este documento, ya que este capítulo es un trabajo en progreso ;-)

Answer 3

En el nuevo enrutador ( >= RC.3 ) https://angular.io/docs/ts/latest/api/router/index/Router-class.html resetConfig se puede usar

router.resetConfig([
 { path: ''team/:id'', component: TeamCmp, children: [
   { path: ''simple'', component: SimpleCmp },
   { path: ''user/:name'', component: UserCmp }
 ] }
]);

Es posible que deba proporcionar alguna configuración de enrutador ficticio para no obtener errores en el inicio de la aplicación.

https://github.com/angular/angular/issues/11437#issuecomment-245995186 proporciona un RC.6 Plunker