angular4にデフォルトルートを設定するにはどうしたらいいですか？

Question

こんにちは、私はこの角度に新しいです。私のアプリケーションでデフォルトルートを設定したいです。 は、私のapp.routing.tsです。 'Route、RouterModule}を' @ angle/router 'からインポートします。

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 iが前方に移動

以下

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

Answer 1

でどのように私はこれを行うことができます誰も私を助けることができるRegisterComponentにこれを変更したいです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']); 
    } 
} 

Answer 2

あなたのアプリルートの順序を変更し、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: '' } 
]; 

Answer 3

、

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