当用户登录Angular时，如何重定向到不同的主页？

当用户登录Angular时，可以通过路由守卫来实现重定向到不同的主页。路由守卫是Angular提供的一种机制，用于在导航到某个路由之前或之后执行一些逻辑。

首先，需要创建一个路由守卫服务。可以使用Angular的命令行工具生成一个守卫服务：

ng generate guard auth

这将在项目中生成一个名为auth.guard.ts的文件。在该文件中，可以实现CanActivate接口来定义路由守卫的逻辑。在canActivate方法中，可以根据用户登录状态来判断是否重定向到不同的主页。

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): boolean {
    // 判断用户是否已登录，这里假设有一个名为isLoggedin的变量表示登录状态
    const isLoggedin = true; // 根据实际情况进行判断

    if (isLoggedin) {
      // 用户已登录，重定向到主页A
      this.router.navigate(['/homeA']);
    } else {
      // 用户未登录，重定向到主页B
      this.router.navigate(['/homeB']);
    }

    return false; // 返回false表示取消当前导航
  }
}

接下来，在路由配置文件（通常是app-routing.module.ts）中，将路由守卫应用到需要进行重定向的路由上。假设有两个主页路由/homeA和/homeB，可以在路由配置中添加守卫：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponentA } from './homeA.component';
import { HomeComponentB } from './homeB.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'homeA', component: HomeComponentA },
  { path: 'homeB', component: HomeComponentB },
  { path: '', redirectTo: '/homeA', pathMatch: 'full', canActivate: [AuthGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上述代码中，通过canActivate: [AuthGuard]将路由守卫应用到根路径（空路径）上，这样当用户访问根路径时，会触发路由守卫的逻辑，根据用户登录状态进行重定向。

需要注意的是，为了使用路由守卫，需要在模块中将AuthGuard服务提供给依赖注入系统。可以在app.module.ts中的providers数组中添加AuthGuard：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './auth.guard';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AuthGuard], // 添加AuthGuard服务
  bootstrap: [AppComponent]
})
export class AppModule { }

至此，当用户登录Angular时，根据其登录状态会自动重定向到不同的主页。