Routeur Angular2 (@angular / router), comment définir l'itinéraire par défaut?

Comment puis-je définir une route par défaut dans ma collection de métadonnées de route @Routes? Si vous utilisez le routeur angular2 de @angular / router-deprecated, vous définissez les routes dans l'objet @routeConfig, qui est une collection d'objets de route, mais ces objets de route ont plus d'attributs sur eux. Par exemple, ils ont des attributs 'name' et 'useAsDefualt' alors que les routes définies sur @angular/router ne le font pas. Je voudrais écrire ma nouvelle application en utilisant le nouveau routeur, mais comment puis-je utiliser le nouveau routeur et de le définir une route par défaut?

C'est mon composant principal de l'application qui définit mes routes: 

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

Les définitions de route semblent fonctionner correctement, quand je clique sur des balises d'ancrage comme celle-ci: 

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

Il passe à la route associée. Mon seul problème est que lorsque mon application se charge, elle n'a pas d'itinéraire actif. Comment définir une route par défaut qui est active lorsque mon application démarre?

Merci!

47
demandé sur cobolstinks 2016-06-03 05:40:22

10 réponses

V2. 0. 0 et versions ultérieures

Voir aussi voir 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 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 @angulaire/routeur

Le routeur RC ne prend pas encore en charge useAsDefault. Comme solution de contournement, vous pouvez naviguer explicitement.

Dans la racine composant

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

Pour les autres composants 

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

  routerOnActivate(curr: RouteSegment, prev?: RouteSegment, currTree?: RouteTree, prevTree?: RouteTree) : void {
    this.router.navigate(['SomeRoute'], curr);
  }
}
77
répondu Günter Zöchbauer 2018-01-18 14:54:54

Vous définissez le chemin de la route est". L'exemple de DashboardComponent est load first.

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

Espère que cela vous aidera.

9
répondu Nguyen 2016-06-03 03:29:44

Dans Angular 2+, Vous pouvez définir l'itinéraire sur la page par défaut en ajoutant Cet itinéraire à 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' },
3
répondu Hiran 2017-08-01 06:25:21

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

Espère que cela va vous aider.

2
répondu Jayant Patil 2017-12-05 06:27:27

Avec la version actuelle d'angular 2, vous ne pouvez pas utiliser ' / ' sur un chemin ou donner un nom à votre itinéraire. Ce que vous pouvez faire est de créer un fichier d'itinéraire comme " app.route.ts " et importez 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';

Alors vos itinéraires: 

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

Puis exporter: 

export  const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)]

Dans votre main.ts import APP_ROUTER_PROVIDERS et ajouter bootstrap les fournisseurs de routeur à la main.ts comme ceci:

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

Enfin, votre lien ressemblera à ce:

li class="nav hidden-xs"><a [routerLink]="['./Dashboard']" routerLinkActive="active">Dashboard</a>/li>
1
répondu user6569033 2016-08-04 07:05:36

Seulement vous devez ajouter un autre paramètre dans votre route, le paramètre est useAsDefault: true. Par exemple, si vous voulez le composant DashboardComponent par défaut, vous devez faire ceci: 

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

Je vous recommande d'ajouter des noms à vos itinéraires.

{ path: '/Dashboard',name:'Dashboard', component: DashboardComponent , useAsDefault:true}
1
répondu ernesto petit 2016-08-19 14:40:38

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

{ path: '', component: DashboardComponent },
1
répondu Bimal Kharel 2017-09-10 15:52:15

Supposons que vous voulez charger RegistrationComponent sur charger, puis ConfirmationComponent sur certains évènements, cliquez sur RegistrationComponent.

, Donc dans appModule.ts, vous pouvez écrire comme cela.

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
      }
    ])

Est également très bien. Choisir ce que vous voulez.

1
répondu Alok Ranjan 2018-05-16 12:51:41

Selon la documentation, vous devriez juste 

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

Sur votre application de routage.module.ts source: https://angular.io/guide/router

0
répondu Eddy Ferreira 2018-08-30 20:59:44

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

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

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

 $( document ).ready() 
 {
    window.location = "/#!db";
 };
-2
répondu Imran 2017-12-08 10:14:00