Angular 4如何在路由中根据条件重定向切换布局？

要实现首次访问用Basiclayout、用户提供位置后切换到Locationlayout的路由重定向，我们可以通过状态服务+路由守卫的组合来完成，下面是具体步骤：

1. 创建位置状态服务 #

首先需要一个全局服务来跟踪用户是否已提供位置信息，同时用localStorage持久化状态，防止页面刷新后状态丢失：

// location-status.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LocationStatusService {
  // 获取持久化的位置状态
  get hasLocation(): boolean {
    return localStorage.getItem('hasLocation') === 'true';
  }

  // 更新位置状态并持久化
  setLocationStatus(status: boolean): void {
    localStorage.setItem('hasLocation', status.toString());
  }
}

2. 编写路由守卫 #

创建一个路由守卫，用来拦截根路径请求，根据位置状态决定重定向到哪个布局路由：

// layout.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, UrlTree } from '@angular/router';
import { LocationStatusService } from './location-status.service';

@Injectable({ providedIn: 'root' })
export class LayoutGuard implements CanActivate {
  constructor(
    private locationStatusService: LocationStatusService,
    private router: Router
  ) {}

  canActivate(): UrlTree {
    // 根据位置状态返回对应的重定向路径
    const targetPath = this.locationStatusService.hasLocation 
      ? '/location' 
      : '/basic';
    return this.router.parseUrl(targetPath);
  }
}

3. 修改路由配置 #

更新app-routing.module.ts，拆分两个布局的路由，并通过根路由的守卫实现动态重定向：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BasiclayoutComponent } from './basiclayout/basiclayout.component';
import { LocationlayoutComponent } from './locationlayout/locationlayout.component';
import { HomeComponent } from './home/home.component';
import { LayoutGuard } from './layout.guard';

const routes: Routes = [
  // 根路由：由守卫决定重定向到哪个布局
  { path: '', canActivate: [LayoutGuard], children: [] },

  // Basic布局路由（首次访问默认进入）
  {
    path: 'basic',
    component: BasiclayoutComponent,
    children: [
      { path: '', component: HomeComponent },
      // 这里添加Basic布局下的其他子路由
    ]
  },

  // Location布局路由（用户提供位置后进入）
  {
    path: 'location',
    component: LocationlayoutComponent,
    children: [
      { path: '', component: HomeComponent },
      // 这里添加Location布局下的其他子路由
    ]
  },

  // 404路由：重定向到根路径，由守卫处理
  { path: '**', redirectTo: '' }
];

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

4. 切换布局的触发逻辑 #

当用户提供位置信息后，调用状态服务更新状态，然后手动导航到Location布局：

// 比如在位置选择组件中
import { Component } from '@angular/core';
import { LocationStatusService } from './location-status.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-location-picker',
  templateUrl: './location-picker.component.html'
})
export class LocationPickerComponent {
  constructor(
    private locationStatusService: LocationStatusService,
    private router: Router
  ) {}

  onLocationSelected(): void {
    // 标记用户已提供位置
    this.locationStatusService.setLocationStatus(true);
    // 导航到Location布局
    this.router.navigate(['/location']);
  }
}

这样配置后：

• 用户首次访问网站时，localStorage中没有位置状态，守卫会重定向到/basic，加载BasiclayoutComponent
• 用户提供位置信息后，状态被持久化，再次访问根路径或刷新页面时，守卫会重定向到/location，加载LocationlayoutComponent

内容的提问来源于stack exchange，提问作者Sandip Nag