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

Question

Comment puis-je définir une route par défaut dans ma @Itinéraires de la route de métadonnées collection? Si vous utilisez le angular2 routeur de @angulaire/routeur-déconseillé-vous de définir les itinéraires @routeConfig objet, qui est une collection d'objets route, mais ces objets route ont plus d'attributs. Par exemple, ils ont 'nom' et 'useAsDefualt' attributs tandis que les itinéraires définis de @angulaire/routeur 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 définir une route par défaut?

C'est mon application principale composante qui définit mon parcours:

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 semble fonctionner très bien, quand je clique sur l'ancrage des balises comme ceci:

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

La transition de la route. Mon seul problème est que lorsque mon app charges de ne pas disposer d'un itinéraire actif. Comment puis-je définir une route par défaut qui est actif lorsque mon application s'amorce?

Merci!

Answer 1

V2.0.0 et plus tard

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 le fourre-tout de l'itinéraire

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

il redirige les "invalides" url.

V3-alpha (vladivostok)

Voie de l'utilisation de / 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 RC routeur ne supporte pas encore useAsDefault. Comme solution de contournement, vous pouvez naviguer explicitement.

Dans le composant racine

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

Answer 2

Vous définissez le chemin d'accès de la route est ". Exemple pour DashboardComponent est la première charge.

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

Espérons que cela vous aidera.

Answer 3

Dans Angulaire 2+, vous pouvez définir la route par défaut de la page par l'ajout de cette route de votre itinéraire module. Dans ce cas, la connexion est mon objectif de l'itinéraire de la page par défaut.

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

Answer 4

J'ai fait face à la même question s'applique à tous solution possible mais finalement, c'résoudre 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érons que cela vous aidera.

Answer 5

Avec la version actuelle de angulaire 2 vous ne pouvez pas utiliser '/' sur un chemin ou de donner un nom à votre itinéraire. Ce que vous pouvez faire est de créer un fichier de route comme "app.les itinéraires.ts" et l'importation de vos composants, assurez-vous que le chemin d'accès 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 à l'exportation:

export  const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)]

Dans votre main.ts importer APP_ROUTER_PROVIDERS et ajouter l'amorçage du routeur fournisseurs à la main.ts comme ceci:

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

Enfin, votre lien ressemblera à ceci:

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