角度2/4条件分量路由？

Posted 2021-04-24

我希望我的所有登录/非登录页面都在同一条路线中，让我们说root“/”，我们可以在不同的条件下将不同的组件设置为路径“”吗？

下面是我的路线设置。如果有可能我可以设置路径：''到HomeComponent登录时，并设置路径：''到UnauthorizedHomeComponent没有登录？请参阅下面的评论

我的路线设定：

const routes: Routes = [
  { path: '', component: HomeComponent, // Want to set to UnauthorizedHomeComponent while not logged in
  { path: 'dashboard', component: DashboardComponent,canActivate: [AuthGuard]},
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent }
];
export const AppRouting = RouterModule.forRoot(routes, { 
  useHash: true
});

在我的app.module中

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    ProfileComponent,
    HomeComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    CustomFormsModule,
    AppRouting  //Routes
  ],
  providers: [AuthService, AuthGuard, JwtHelper],
  bootstrap: [AppComponent]
})
export class AppModule { }

答案

我们不能在家里使用Router.navigate([])来决定降落的地方吗？例如

export class HomeComponent {
   loggedIn:boolean = true;
   constructor(private router:Router){}

   ngOnInit(){
     if(!this.loggedIn){
        this.router.navigate(["/login"]);
     }
   }
}

@NgModule({
   declarations: [
      AppComponent, HomeComponent, UnAuthHomeComponent
   ],
   imports: [
      BrowserModule, FormsModule,
      RouterModule.forRoot([
        {path: '', component: HomeComponent},
        {path: 'shopping', component: ShoppingComponent},
        .....
      ])
   ],
   bootstrap: [AppComponent]
})
export class AppModule{

}

在这里控制将来到HomeComponent，根据您的条件，您可以导航到您想要的组件。