我如何在angular4中设置默认路由？

  • Z时代
  • 2024-01-10
  • 分类：问答

嗨，我是新来这个角我想要在我的应用程序中设置默认路由 下面是我的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 { }

回答：

在您的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']); 
    } 
}

回答：

请更改您的应用程序路线顺序并添加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: '' } 
];

回答：

您可以使用这样的，

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

以上是 我如何在angular4中设置默认路由？ 的全部内容， 来源链接： utcz.com/qa/265886.html

回到顶部