Angular2 Router (@ Angular / Router), wie man die Standardroute einstellt?

Wie kann ich eine Standardroute in meiner @ Route-Routenmetadatensammlung festlegen? Wenn Sie den Angular2-Router von @ angle / router-veraltet verwenden, definieren Sie die Routen im @ routeConfig-Objekt, einer Sammlung von Routenobjekten, aber diese Routenobjekte haben mehr Attribute. Zum Beispiel haben sie die Attribute 'name' und 'useAsDefualt', während die aus @ angle / router definierten Routen dies nicht tun. Ich möchte meine neue App mit dem neuen Router schreiben, aber wie verwende ich den neuen Router und lege eine Standardroute fest?

Dies ist meine Haupt-App-Komponente, die meine Routen definiert:

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

Die Routendefinitionen scheinen gut zu funktionieren, wenn ich auf Ankertags wie diesen klicke:

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

Es wechselt zur zugehörigen Route. Mein einziges Problem ist, dass beim Laden meiner App keine Route aktiv ist. Wie definiere ich eine Standardroute, die beim Booten meiner App aktiv ist?

Vielen Dank!

V2.0.0 und höher

Siehe auch 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 }
    ] 
  }
];

Es gibt auch die Sammelroute

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

die "ungültige" URLs umleitet.

V3-alpha (Wladiwostok)

Verwenden Sie Pfad /undredirectTo

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

RC.1 @ Winkel / Router

Der RC-Router unterstützt noch nicht useAsDefault. Um dieses Problem zu umgehen, können Sie explizit navigieren.

In der Wurzelkomponente

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

für andere Komponenten

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

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

Sie legen den Routenpfad auf ''. Beispiel für DashboardComponent ist das Laden zuerst.

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

Hoffe es hilft dir.

In Angular 2+ können Sie die Route auf die Standardseite setzen, indem Sie diese Route Ihrem Routenmodul hinzufügen. In diesem Fall ist die Anmeldung meine Zielroute für die Standardseite.

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

Ich sah mich dem gleichen Problem gegenüber, alle möglichen Lösungen anzuwenden, aber schließlich löste dies mein Problem

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

Hoffe das wird dir helfen.

Mit der aktuellen Version von Winkel 2 können Sie weder '/' für einen Pfad verwenden noch Ihrer Route einen Namen geben. Sie können eine Routendatei wie "app.routes.ts" erstellen und Ihre Komponenten importieren. Achten Sie beim Importieren auf den Pfad.

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

Hinzufügen:

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

Dann deine Routen:

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

Dann exportieren:

export  const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)]

Importieren APP_ROUTER_PROVIDERSund fügen Sie in Ihrem main.ts Bootstrap die Router-Anbieter wie folgt zu main.ts hinzu:

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

Schließlich sieht Ihr Link folgendermaßen aus:

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

Sie müssen nur andere Parameter zu Ihrer Route hinzufügen. Der Parameter lautet useAsDefault: true. Wenn Sie beispielsweise die DashboardComponent als Standard verwenden möchten, müssen Sie Folgendes tun:

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

Ich empfehle Ihnen, Ihren Routen Namen hinzuzufügen.

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

Der Pfad sollte leer bleiben, damit er zur Standardkomponente wird.

{ path: '', component: DashboardComponent },

Angenommen, Sie möchten RegistrationComponent beim Laden und dann ConfirmationComponent bei einem Ereignis laden und auf RegistrationComponent klicken .

Also appModule.ts, können Sie so schreiben.

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

ODER

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

ist auch gut. Wählen Sie, was Sie möchten.

laut dokumentation solltest du nur

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

auf Ihrer app-routing.module.ts-Quelle: https://angular.io/guide/router

Ich hatte gerade das gleiche Problem, ich habe es geschafft, es auf meinem Computer zum Laufen zu bringen, aber die Änderung, die ich vorgenommen habe, ist nicht die gleiche, wie sie in der Dokumentation erwähnt wird, so dass es sich möglicherweise um ein Problem mit dem Routing-Modul für Winkelversionen handelt. Meins ist Angular 7

Es hat nur funktioniert, wenn ich den Hauptrouteneintragspfad des Lazy Moduls mit demselben Pfad geändert habe, der in der app-route.ts konfiguriert wurde

routes = [{path:'', redirectTo: '\home\default', pathMatch: 'full'},
           {path: '', 
           children: [{
             path:'home',
             loadChildren :'lazy module path'      
           }]

         }];

 routes configured at HomeModule
 const routes = [{path: 'home', redirectTo: 'default', pathMatch: 'full'},
             {path: 'default', component: MyPageComponent},
            ]

 instead of 
 const routes = [{path: '', redirectTo: 'default', pathMatch: 'full'},
                   {path: 'default', component: MyPageComponent},
                ]