我如何在angular4中設置默認路由？

嗨，我是新來這個角我想要在我的應用程序中設置默認路由下面是我的app.routing.ts 從'@角度/路由器'導入{路由，路由器模塊};我如何在angular4中設置默認路由？

import { HomeComponent } from './home/index'; 
import { LoginComponent } from './login/index'; 
import { RegisterComponent } from './register/index'; 
import { AuthGuard } from './_guards/index'; 

const appRoutes: Routes = [ 
    { path: '', component: HomeComponent, canActivate: [AuthGuard] }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegisterComponent }, 

    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
]; 

export const routing = RouterModule.forRoot(appRoutes);

目前其裝載LoginComponent我想改變這RegisterComponent我怎麼能做到這一點任何人都可以幫助我前進

下面是我app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; 

// used to create fake backend 
import { fakeBackendProvider } from './_helpers/index'; 

import { AppComponent } from './app.component'; 
import { routing }  from './app.routing'; 

import { AlertComponent } from './_directives/index'; 
import { AuthGuard } from './_guards/index'; 
import { JwtInterceptor } from './_helpers/index'; 
import { AlertService, AuthenticationService, UserService } from './_services/index'; 
import { HomeComponent } from './home/index'; 
import { LoginComponent } from './login/index'; 
import { RegisterComponent } from './register/index'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpClientModule, 
     routing 
    ], 
    declarations: [ 
     AppComponent, 
     AlertComponent, 
     HomeComponent, 
     LoginComponent, 
     RegisterComponent 
    ], 
    providers: [ 
     AuthGuard, 
     AlertService, 
     AuthenticationService, 
     UserService, 
     { 
      provide: HTTP_INTERCEPTORS, 
      useClass: JwtInterceptor, 
      multi: true 
     }, 

     // provider used to create fake backend 
     fakeBackendProvider 
    ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

來源

2017-12-27 its me

是'{路徑： '**'，redirectTo： '註冊'}'你正在尋找？ – eminlala

@eminlala我試過這個{path：'**'，redirectTo：'register'}但仍然是它的加載登錄頁面 –

當你測試它時，你輸入什麼URL作爲URL？另外，如果您還可以添加「AuthGuard」的代碼，那將會很棒。 – eminlala

在您的AuthGard類canActivate方法，在false答案的情況下，您可以簡單地將客戶端重定向到/register。

export class AuthGuard { 

    constructor(private authService : AuthService, private router : Router) { 
    } 

    canActivate(route : ActivatedRouteSnapshot, state : RouterStateSnapshot) { 
    if(this.authService.isLoggedIn()) 
     return true; 
    else // This: 
     this.router.navigate(['DESIRED/PATH']); 
    } 
}

來源

2017-12-27 15:15:54 fingeron

請更改您的應用程序路線順序並添加pathMatch屬性。

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: '', component: HomeComponent, canActivate: [AuthGuard], pathMatch: 'full' }, 

    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
];

來源

2017-12-27 15:20:22 Ashish

您可以使用這樣的，

// otherwise redirect to home 
{ path: '**', redirectTo: '/' }

來源

2017-12-29 08:39:09

我如何在angular4中設置默認路由？

回答

相關問題