我如何在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中设置默认路由？

回答

相关问题