page - Angular2 router(@ angular/router), ¿cómo configurar la ruta predeterminada?

router.navigate angular 5

Question

¿Cómo puedo establecer una ruta predeterminada en mi colección de metadatos de ruta @Routes? Si usa el enrutador angular2 de @ angular / router-obsoleto, define las rutas en el objeto @routeConfig, que es una colección de objetos de ruta, pero estos objetos de ruta tienen más atributos. Por ejemplo, tienen los atributos ''name'' y ''useAsDefualt'' mientras que las rutas definidas fuera de @ angular / router no. Me gustaría escribir mi nueva aplicación usando el nuevo enrutador, pero ¿cómo uso el nuevo enrutador y establezco una ruta predeterminada?

Este es mi componente principal de la aplicación que define mis rutas:

import { Component } from ''@angular/core'';
import { DashboardComponent } from ''./dashboard/dashboard.component'';
import { ConfigManagerComponent } from ''./configManager/configManager.component'';
import { ApplicationMgmtComponent } from ''./applicationMgmt/applicationMgmt.component'';
import { MergeComponent } from ''./merge/merge.component'';

import { ROUTER_DIRECTIVES, Routes } from ''@angular/router'';


@Component({
    selector: ''app-container'',
    templateUrl: ''app/app.component.html'',
    directives: [ROUTER_DIRECTIVES]
})

@Routes([

        { path: ''/Dashboard'', component: DashboardComponent },
        { path: ''/ConfigManager'', component: ConfigManagerComponent },
        { path: ''/Merge'', component: MergeComponent },
        { path: ''/ApplicationManagement'', component: ApplicationMgmtComponent }
])

export class AppComponent { }

Las definiciones de ruta parecen estar funcionando bien, cuando hago clic en etiquetas de ancla como esta:

<li class="nav hidden-xs"><a [routerLink]="[''./Dashboard'']">Dashboard</a>/li>

Transita a la ruta asociada. Mi único problema es que cuando se carga mi aplicación, no tiene una ruta activa. ¿Cómo defino una ruta predeterminada que esté activa cuando mi aplicación arranque?

¡Gracias!

Answer 1

Con la versión actual de angular 2 no puede usar ''/'' en una ruta o dar un nombre a su ruta. Lo que puede hacer es crear un archivo de ruta como "app.routes.ts" e importar sus componentes, asegúrese de la ruta al importar.

import { Component } from ''@angular/core'';
import { DashboardComponent } from ''./dashboard/dashboard.component'';
import { ConfigManagerComponent } from ''./configManager/configManager.component'';
import { ApplicationMgmtComponent } from ''./applicationMgmt/applicationMgmt.component'';
import { MergeComponent } from ''./merge/merge.component'';`

Añadir:

import {RouterConfig, provideRouter } from ''@angular/router'';

Entonces tus rutas:

const routes:RouterConfig = [      
    { path: ''Dashboard'', component: DashboardComponent },
    { path: ''ConfigManager'', component: ConfigManagerComponent },
    { path: ''Merge'', component: MergeComponent },
    { path: ''ApplicationManagement'', component: ApplicationMgmtComponent }
 ];

Luego exportar:

export  const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)]

En su main.ts, importe APP_ROUTER_PROVIDERS y agregue bootstrap a los proveedores de enrutadores a main.ts como este:

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

Finalmente, su enlace se verá así:

li class="nav hidden-xs"><a [routerLink]="[''./Dashboard'']" routerLinkActive="active">Dashboard</a>/li>

Answer 2

En Angular 2+, puede establecer la ruta a la página predeterminada agregando esta ruta a su módulo de ruta. En este caso, iniciar sesión es mi ruta de destino para la página predeterminada.

{path:'''',redirectTo:''login'', pathMatch: ''full'' },

Answer 3

Enfrenté el mismo problema, apliqué todas las soluciones posibles, pero finalmente esto resolvió mi problema

export class AppRoutingModule {
constructor(private router: Router) {
    this.router.errorHandler = (error: any) => {
        this.router.navigate([''404'']); // or redirect to default route
    }
  }
}

Espero que esto te ayudará.

Answer 4

Establecer ruta de ruta es ''''. El ejemplo para DashboardComponent es cargar primero.

@Routes([
        { path: '''', component: DashboardComponent },
        { path: ''/ConfigManager'', component: ConfigManagerComponent },
        { path: ''/Merge'', component: MergeComponent },
        { path: ''/ApplicationManagement'', component: ApplicationMgmtComponent }
])

Espero que te ayude.

Answer 5

La ruta debe dejarse en blanco para que sea el componente predeterminado.

{ path: '''', component: DashboardComponent },

Answer 6

Solo necesita agregar otro parámetro en su ruta, el parámetro es useAsDefault: true. Por ejemplo, si desea que DashboardComponent sea el predeterminado, debe hacer esto:

@RouteConfig([
    { path: ''/Dashboard'', component: DashboardComponent , useAsDefault:true},
    .
    .
    .
    ])

Te recomiendo que agregues nombres a tus rutas.

{ path: ''/Dashboard'',name:''Dashboard'', component: DashboardComponent , useAsDefault:true}

Answer 7

Suponga que desea cargar RegistrationComponent al cargar y luego ConfirmationComponent en algún evento, haga clic en RegistrationComponent .

Entonces, en appModule.ts , puedes escribir así.

RouterModule.forRoot([
      { 
        path: '''', 
        redirectTo: ''registration'', 
        pathMatch: ''full''
       },
       { 
        path: ''registration'', 
        component: RegistrationComponent
       },
      {
        path : ''confirmation'',
        component: ConfirmationComponent
      }
    ]) 

O

RouterModule.forRoot([
       { 
        path: '''', 
        component: RegistrationComponent
       },
      {
        path : ''confirmation'',
        component: ConfirmationComponent
      }
    ]) 

También está bien. Elige lo que quieras.

Answer 8

de acuerdo con la documentación solo debes

{ path: ''**'', component: DefaultLayoutComponent }

en su fuente app-routing.module.ts: https://angular.io/guide/router

Answer 9

V2.0.0 y posterior

Ver también ver https://angular.io/guide/router#the-default-route-to-heroes

RouterConfig = [
  { path: '''', redirectTo: ''/heroes'', pathMatch: ''full'' },
  { path: ''heroes'', component: HeroComponent,
    children: [
      { path: '''', redirectTo: ''/detail'', pathMatch: ''full'' },
      { path: ''detail'', component: HeroDetailComponent }
    ] 
  }
];

También está la ruta general

{ path: ''**'', redirectTo: ''/heroes'', pathMatch: ''full'' },

que redirige las URL "no válidas".

V3-alpha (vladivostok)

Use path / y redirectTo

RouterConfig = [
  { path: ''/'', redirectTo: ''heroes'', terminal: true },
  { path: ''heroes'', component: HeroComponent,
    children: [
      { path: ''/'', redirectTo: ''detail'', terminal: true },
      { path: ''detail'', component: HeroDetailComponent }
    ] 
  }
];

RC.1 @ angular / enrutador

El enrutador RC aún no admite useAsDefault . Como solución alternativa, puede navegar explícitamente.

En el componente raíz

export class AppComponent {
  constructor(router:Router) {
    router.navigate([''/Merge'']);
  }
}

para otros componentes

export class OtherComponent {
  constructor(private router:Router) {}

  routerOnActivate(curr: RouteSegment, prev?: RouteSegment, currTree?: RouteTree, prevTree?: RouteTree) : void {
    this.router.navigate([''SomeRoute''], curr);
  }
}