Router angolare2 (@ angolare/router), come impostare il percorso predefinito?

Question

Come posso impostare un percorso predefinito nella mia raccolta di metadati del percorso @Routes? Se si utilizza il router angular2 da @ angular/router deprecato, si definiscono i percorsi nell'oggetto @routeConfig, che è una raccolta di oggetti route, ma questi oggetti di percorso hanno più attributi su di essi. Ad esempio hanno attributi 'name' e 'useAsDefualt' mentre le route definite da @ angular/router no. Vorrei scrivere la mia nuova app utilizzando il nuovo router, ma come faccio a utilizzare il nuovo router e impostare un percorso predefinito?

Questa è la mia componente applicazione principale che definisce miei percorsi:

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 { } 

Il percorso definizioni sembrano funzionare bene, quando clicco sul tag di ancoraggio come questo:

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

esso transizioni alla rotta associata. Il mio unico problema è che quando viene caricata la mia app non ha una rotta attiva. Come posso definire un percorso predefinito attivo quando l'app si avvia?

Grazie!

Answer 1

V2.0.0 e successivamente

Vedi anche vedere 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 } 
    ] 
    } 
]; 

C'è anche il catch-all percorso

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

che reindirizza gli URL "non valido".

V3-alfa (vladivostok)

Uso percorso / e redirectTo

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

RC.1 @ angolare/router

Il router RC non supporta ancora useAsDefault . Come soluzione alternativa puoi navigare in modo esplicito.

Nella componente principale

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

per altri componenti

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

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

Answer 2

Il percorso impostato per l'itinerario è "". Esempio per DashboardComponent viene caricato per primo.

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

Spero che ti aiuti.

Answer 3

Con la versione corrente di angolare 2 non si può usare '/' su un percorso o di dare un nome alla rotta . Quello che puoi fare è creare un file di percorso come "app.routes.ts" e importare i tuoi componenti, assicurati del percorso durante l'importazione.

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';` 

Add:

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

Poi i percorsi:

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

quindi esportare:

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes)] 

Nei tuoi main.ts importare APP_ROUTER_PROVIDERS e aggiungere bootstrap i fornitori di router alla ma in.ts come questo:

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]); 

Infine, il tuo link sarà simile a questo:

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

Answer 4

avete solo bisogno di aggiungere altro parametro nel vostro percorso, il parametro è useAsDefault: vero. Ad esempio, se si desidera che la DashboardComponent come predefinito quello che devi fare questo:

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

raccomando di aggiungere i nomi ai tuoi percorsi.

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

Answer 5

Il percorso deve essere lasciato vuoto per renderlo componente predefinito.

{ path: '', component: DashboardComponent }, 

Answer 6

In Angular 2+, è possibile impostare il percorso verso la pagina predefinita aggiungendo questo percorso al modulo del percorso. In questo caso l'accesso è il mio percorso di destinazione per la pagina predefinita.

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

Answer 7

Ho affrontato lo stesso problema applicare tutte le possibili soluzioni, ma alla fine questo risolvere il mio problema

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

Spero che questo vi aiuterà.

Answer 8

Add percorso verso la pagina di default

$routeProvider 
    .when("/db", { 
     templateUrl: "/home/dashboard" 
    }) 

Poi nella pagina di destinazione aggiungere il seguente script.

$(document).ready() 
{ 
    window.location = "/#!db"; 
};