角度 2/4 条件组件路由？答案

【问题标题】：angular 2/4 conditional component routing?角度 2/4 条件组件路由？
【发布时间】：2017-12-17 11:50:26
【问题描述】：

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

下面是我的路线设置。如果我可以在登录时将 path: '' 设置为 HomeComponent，并在未登录时将 path:'' 设置为 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 { }

【问题讨论】：

只使用一个包装组件，并使用 *ngIf 显示其中一个。
正在考虑类似的方法，这是一种正确的方法吗？
为什么不呢？如果我认为这是一个坏主意，我会建议它吗？
非常感谢您的建议。我试试

标签： angular routes

【解决方案1】：

我们不能在家中使用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，根据您的情况，您可以导航到所需的组件。

【讨论】：