Angular2 routeur (@ angular / routeur), comment définir la route par défaut?

V2.0.0 et versions ultérieures

Voir aussi 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 } ] } ]; 

Il y a aussi la route du fourre-tout

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

qui redirige les URL “invalides”.

V3-alpha (vladivostok)

Utiliser le chemin / et redirectTo

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

RC.1 @ angular / routeur

Le routeur RC ne prend pas encore en charge useAsDefault . Pour contourner ce problème, vous pouvez naviguer explicitement.

Dans le composant racine

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

pour d’autres composants

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

Vous définissez le chemin de la route est ”. Exemple pour DashboardComponent est le chargement en premier.

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

J’espère que cela vous aidera.

Dans Angular 2+, vous pouvez définir un itinéraire vers la page par défaut en ajoutant cette route à votre module d’itinéraire. Dans ce cas, la connexion est mon itinéraire cible pour la page par défaut.

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

J’ai fait face au même problème appliquer toutes les solutions possibles mais finalement cela résout mon problème

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

J’espère que ceci vous aidera.

Avec la version actuelle de angular 2, vous ne pouvez pas utiliser ‘/’ sur un chemin ou donner un nom à votre itinéraire. Ce que vous pouvez faire, c’est créer un fichier de route comme “app.routes.ts” et importer vos composants, assurez-vous du chemin lors de l’importation.

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

Ajouter:

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

Ensuite, vos itinéraires:

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

Puis exportez:

 export const APP_ROUTER_PROVIDERS = [ provideRouter(routes)] 

Dans votre main.ts, importez APP_ROUTER_PROVIDERS et ajoutez les fournisseurs de routage bootstrap aux main.ts comme ceci:

 bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]); 

Enfin, votre lien ressemblera à ceci:

 li class="nav hidden-xs">Dashboard/li> 

Seulement vous devez append un autre paramètre dans votre route, le paramètre est useAsDefault: true. Par exemple, si vous souhaitez que DashboardComponent soit utilisé par défaut, vous devez le faire:

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

Je vous recommande d’append des noms à vos itinéraires.

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

Le chemin doit être laissé vide pour en faire le composant par défaut.

 { path: '', component: DashboardComponent }, 

Supposons que vous vouliez charger RegistrationComponent lors du chargement, puis ConfirmationComponent sur certains événements, cliquez sur RegistrationComponent .

Donc, dans appModule.ts , vous pouvez écrire comme ça.

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

OU

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

c’est bien aussi. Choisissez ce que vous voulez.

selon la documentation, vous devriez juste

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

sur votre source app-routing.module.ts: https://angular.io/guide/router

Ajouter un itinéraire à votre page par défaut

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

Ensuite, sur votre page de destination, ajoutez le script suivant.

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