Angular路由与导航配置

# 创建新项目时启用路由
ng new my-app --routing

# 为现有模块添加路由
ng generate module app-routing --flat --module=app

# 创建带路由的功能模块
ng generate module admin --routing

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// 导入组件
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { ProductsComponent } from './products/products.component';
import { ProductDetailComponent } from './products/product-detail/product-detail.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

// 定义路由配置
const routes: Routes = [
  // 默认路由重定向
  { path: '', redirectTo: '/home', pathMatch: 'full' },

  // 基本路由
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },

  // 带参数的路由
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductDetailComponent },

  // 通配符路由（必须放在最后）
  { path: '**', component: PageNotFoundComponent }
];

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

<!-- app.component.html -->
<div class="app-container">
  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" [routerLink]="['/']">MyApp</a>
      <div class="navbar-nav">
        <a class="nav-link" [routerLink]="['/home']">首页</a>
        <a class="nav-link" [routerLink]="['/about']">关于</a>
        <a class="nav-link" [routerLink]="['/products']">产品</a>
        <a class="nav-link" [routerLink]="['/contact']">联系</a>
      </div>
    </div>
  </nav>

  <!-- 路由出口 -->
  <div class="container mt-4">
    <router-outlet></router-outlet>
  </div>

  <!-- 页脚 -->
  <footer class="mt-5 text-center">
    <p>© 2024 MyApp</p>
  </footer>
</div>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  template: `
    <h2>产品详情</h2>
    <p>产品ID: {{ productId }}</p>
    <p>搜索关键词: {{ searchQuery }}</p>
  `
})
export class ProductDetailComponent implements OnInit {
  productId!: string;
  searchQuery!: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 获取路径参数（方法1：快照）
    this.productId = this.route.snapshot.params['id'];

    // 获取查询参数（方法1：快照）
    this.searchQuery = this.route.snapshot.queryParams['q'];

    // 获取路径参数（方法2：观察者 - 推荐）
    this.route.params.subscribe((params: Params) => {
      this.productId = params['id'];
      // 当参数变化时，重新加载数据
      this.loadProductData(this.productId);
    });

    // 获取查询参数（方法2：观察者）
    this.route.queryParams.subscribe((params: Params) => {
      this.searchQuery = params['q'];
      // 当查询参数变化时，执行搜索
      if (this.searchQuery) {
        this.performSearch(this.searchQuery);
      }
    });

    // 获取片段参数
    this.route.fragment.subscribe(fragment => {
      console.log('页面片段:', fragment);
      if (fragment) {
        this.scrollToElement(fragment);
      }
    });

    // 获取所有参数
    const paramMap = this.route.snapshot.paramMap;
    const queryParamMap = this.route.snapshot.queryParamMap;

    this.productId = paramMap.get('id') || '';
    this.searchQuery = queryParamMap.get('q') || '';
  }

  private loadProductData(id: string): void {
    // 加载产品数据
    console.log('加载产品数据:', id);
  }

  private performSearch(query: string): void {
    // 执行搜索
    console.log('执行搜索:', query);
  }

  private scrollToElement(elementId: string): void {
    // 滚动到指定元素
    const element = document.getElementById(elementId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
}

// auth.guard.ts - 认证守卫
import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router,
  UrlTree
} from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    // 检查用户是否已登录
    if (this.authService.isLoggedIn) {
      return true;
    }

    // 如果未登录，重定向到登录页
    // 同时保存当前URL，以便登录后返回
    this.authService.redirectUrl = state.url;
    return this.router.parseUrl('/login');
  }
}

// admin.guard.ts - 管理员权限守卫
@Injectable({ providedIn: 'root' })
export class AdminGuard implements CanActivate {
  constructor(private authService: AuthService) {}

  canActivate(): boolean {
    // 检查用户角色是否为管理员
    const user = this.authService.currentUser;
    return user?.role === 'admin';
  }
}

// unsaved-changes.guard.ts - 未保存更改守卫
@Injectable({ providedIn: 'root' })
export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {

    // 调用组件的canDeactivate方法
    return component.canDeactivate ?
      component.canDeactivate() : true;
  }
}

// 在组件中实现CanComponentDeactivate接口
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Component({...})
export class EditProductComponent implements CanComponentDeactivate {
  hasUnsavedChanges = false;

  canDeactivate(): boolean | Observable<boolean> {
    if (!this.hasUnsavedChanges) {
      return true;
    }

    // 如果有未保存的更改，显示确认对话框
    return confirm('您有未保存的更改，确定要离开吗？');
  }
}

const routes: Routes = [
  // 公开路由（不需要守卫）
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },

  // 需要认证的路由
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard]  // 使用认证守卫
  },

  // 需要管理员权限的路由
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard, AdminGuard]  // 多个守卫
  },

  // 带数据预加载的路由
  {
    path: 'product/:id',
    component: ProductDetailComponent,
    resolve: {
      product: ProductResolver  // 使用数据解析器
    }
  },

  // 子路由守卫
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivateChild: [AuthGuard],  // 子路由守卫
    children: [
      { path: 'stats', component: StatsComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  },

  // 懒加载模块守卫
  {
    path: 'reports',
    canLoad: [AuthGuard],  // 模块加载守卫
    loadChildren: () => import('./reports/reports.module')
      .then(m => m.ReportsModule)
  }
];

// app-routing.module.ts
const routes: Routes = [
  // 主路由
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },

  // 懒加载功能模块
  {
    path: 'products',
    loadChildren: () => import('./products/products.module')
      .then(m => m.ProductsModule)
  },

  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module')
      .then(m => m.AdminModule),
    canLoad: [AuthGuard, AdminGuard]  // 模块加载守卫
  },

  {
    path: 'user',
    loadChildren: () => import('./user/user.module')
      .then(m => m.UserModule)
  },

  // 通配符路由（必须在最后）
  { path: '**', component: PageNotFoundComponent }
];

// products.module.ts
@NgModule({
  declarations: [
    ProductsComponent,
    ProductDetailComponent,
    ProductListComponent
  ],
  imports: [
    CommonModule,
    ProductsRoutingModule  // 产品模块有自己的路由
  ]
})
export class ProductsModule { }

// products-routing.module.ts
const routes: Routes = [
  { path: '', component: ProductsComponent },
  { path: ':id', component: ProductDetailComponent }
];

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

// 使用预加载策略
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // 1. 不预加载（默认）
    preloadingStrategy: NoPreloading,

    // 2. 预加载所有模块
    preloadingStrategy: PreloadAllModules,

    // 3. 自定义预加载策略
    preloadingStrategy: CustomPreloadingStrategy,

    // 4. 其他配置选项
    enableTracing: true,  // 启用路由调试
    useHash: false,       // 是否使用hash模式
    scrollPositionRestoration: 'enabled'  // 滚动位置恢复
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// 自定义预加载策略
@Injectable({ providedIn: 'root' })
export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // 检查路由是否有data.preload标记
    if (route.data && route.data['preload'] === true) {
      return load();
    }

    // 否则不预加载
    return of(null);
  }
}

// 在路由配置中标记需要预加载的模块
const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module')
      .then(m => m.DashboardModule),
    data: { preload: true }  // 标记为需要预加载
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module')
      .then(m => m.SettingsModule)
    // 不标记，使用懒加载
  }
];

// 路由配置
const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [  // 定义子路由
      {
        path: '',
        redirectTo: 'overview',
        pathMatch: 'full'
      },
      {
        path: 'overview',
        component: OverviewComponent
      },
      {
        path: 'analytics',
        component: AnalyticsComponent
      },
      {
        path: 'reports',
        component: ReportsComponent
      },
      {
        path: 'settings',
        component: SettingsComponent
      }
    ]
  }
];

// dashboard.component.html
<div class="dashboard">
  <!-- 侧边栏导航 -->
  <nav class="sidebar">
    <a [routerLink]="['overview']" routerLinkActive="active">
      概览
    </a>
    <a [routerLink]="['analytics']" routerLinkActive="active">
      分析
    </a>
    <a [routerLink]="['reports']" routerLinkActive="active">
      报告
    </a>
    <a [routerLink]="['settings']" routerLinkActive="active">
      设置
    </a>
  </nav>

  <!-- 子路由出口 -->
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

// 路由配置
const routes: Routes = [
  // 主路由
  { path: 'home', component: HomeComponent },

  // 辅助路由
  {
    path: 'sidebar',
    component: SidebarComponent,
    outlet: 'sidebar'  // 命名路由出口
  },
  {
    path: 'chat',
    component: ChatComponent,
    outlet: 'chat'
  }
];

// app.component.html
<div class="app-container">
  <!-- 主路由出口 -->
  <div class="main-content">
    <router-outlet></router-outlet>
  </div>

  <!-- 辅助路由出口 -->
  <div class="sidebar">
    <router-outlet name="sidebar"></router-outlet>
  </div>

  <div class="chat-widget">
    <router-outlet name="chat"></router-outlet>
  </div>
</div>

// 导航到辅助路由
// 同时激活主路由和辅助路由
this.router.navigate([
  { outlets: { primary: ['home'], sidebar: ['sidebar'] } }
]);

// 只导航辅助路由
this.router.navigate([{ outlets: { sidebar: ['chat'] } }]);

// 关闭辅助路由
this.router.navigate([{ outlets: { sidebar: null } }]);