路由基础 #

┌─────────────────────────────────────────────────────┐
│                    Angular 应用                      │
├─────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────┐   │
│  │              Router Outlet                   │   │
│  │  ┌─────────────────────────────────────┐    │   │
│  │  │                                     │    │   │
│  │  │     根据URL显示对应组件              │    │   │
│  │  │                                     │    │   │
│  │  └─────────────────────────────────────┘    │   │
│  └─────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────┐   │
│  │  /home → HomeComponent                     │   │
│  │  /users → UsersComponent                   │   │
│  │  /users/:id → UserDetailComponent          │   │
│  └─────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────┘

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: '**', redirectTo: '' }
];

import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

<!-- app.component.html -->
<nav>
  <a routerLink="/">首页</a>
  <a routerLink="/users">用户</a>
  <a routerLink="/about">关于</a>
</nav>

<router-outlet></router-outlet>

<!-- 基本导航 -->
<a routerLink="/home">首页</a>
<a routerLink="/users">用户列表</a>

<!-- 相对路径 -->
<a routerLink="./detail">详情</a>
<a routerLink="../list">返回列表</a>

<!-- 数组语法（推荐） -->
<a [routerLink]="['/users', userId]">用户详情</a>
<a [routerLink]="['/products', productId, 'edit']">编辑产品</a>

<!-- 高亮当前路由 -->
<a routerLink="/home" routerLinkActive="active">首页</a>
<a routerLink="/users" routerLinkActive="active">用户</a>

<!-- 多个类名 -->
<a routerLink="/home" [routerLinkActive]="['active', 'highlighted']">首页</a>

<!-- 配置选项 -->
<a 
  routerLink="/home" 
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }">
  首页
</a>

import { Router } from '@angular/router';

@Component({
  template: `
    <button (click)="goToUsers()">前往用户列表</button>
    <button (click)="goToUserDetail(1)">查看用户详情</button>
  `
})
export class ExampleComponent {
  constructor(private router: Router) {}
  
  goToUsers() {
    this.router.navigate(['/users']);
  }
  
  goToUserDetail(id: number) {
    this.router.navigate(['/users', id]);
  }
  
  goBack() {
    this.router.navigate(['..']);
  }
}

// 导航带查询参数
this.router.navigate(['/users'], {
  queryParams: { page: 1, size: 10 }
});
// URL: /users?page=1&size=10

// 导航带片段
this.router.navigate(['/users'], {
  fragment: 'section-1'
});
// URL: /users#section-1

// 完整示例
this.router.navigate(['/users', userId], {
  queryParams: { tab: 'profile' },
  fragment: 'comments'
});
// URL: /users/123?tab=profile#comments

const routes: Routes = [
  { path: 'users/:id', component: UserDetailComponent },
  { path: 'products/:category/:id', component: ProductDetailComponent }
];

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

@Component({
  selector: 'app-user-detail',
  template: '<p>用户ID: {{ userId }}</p>'
})
export class UserDetailComponent implements OnInit {
  userId: string;
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    // 方式1：快照获取（一次性）
    this.userId = this.route.snapshot.paramMap.get('id');
    
    // 方式2：订阅获取（参数变化时更新）
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('id');
    });
  }
}

import { ActivatedRoute } from '@angular/router';

@Component({
  template: '<p>页码: {{ page }}</p>'
})
export class UsersComponent implements OnInit {
  page: number;
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    // 快照获取
    this.page = +this.route.snapshot.queryParamMap.get('page');
    
    // 订阅获取
    this.route.queryParamMap.subscribe(params => {
      this.page = +params.get('page') || 1;
    });
  }
}

@Component({
  template: '...'
})
export class DetailComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    // 路径参数
    this.route.params.subscribe(params => {
      console.log('路径参数:', params);
    });
    
    // 查询参数
    this.route.queryParams.subscribe(params => {
      console.log('查询参数:', params);
    });
    
    // 所有参数
    this.route.paramMap.subscribe(paramMap => {
      console.log('ID:', paramMap.get('id'));
    });
    
    this.route.queryParamMap.subscribe(queryParamMap => {
      console.log('Page:', queryParamMap.get('page'));
    });
  }
}

const routes: Routes = [
  {
    path: 'users',
    component: UsersComponent,
    children: [
      { path: '', component: UserListComponent },
      { path: ':id', component: UserDetailComponent },
      { path: ':id/edit', component: UserEditComponent }
    ]
  }
];

@Component({
  selector: 'app-users',
  template: `
    <h2>用户管理</h2>
    <nav>
      <a routerLink="./">用户列表</a>
      <a routerLink="./1">用户详情</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class UsersComponent {}

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      {
        path: 'users',
        component: AdminUsersComponent,
        children: [
          { path: '', component: UserListComponent },
          { path: ':id', component: UserDetailComponent }
        ]
      },
      {
        path: 'products',
        component: AdminProductsComponent
      }
    ]
  }
];

const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module')
      .then(m => m.AdminModule)
  },
  {
    path: 'users',
    loadComponent: () => import('./users/users.component')
      .then(c => c.UsersComponent)
  }
];

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: '', component: AdminDashboardComponent },
      { path: 'settings', component: AdminSettingsComponent }
    ])
  ],
  declarations: [
    AdminDashboardComponent,
    AdminSettingsComponent
  ]
})
export class AdminModule {}

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data?.preload) {
      return load();
    }
    return of(null);
  }
}

// 配置
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withPreloading(PreloadAllModules))
  ]
};

import { Component } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';

@Component({
  selector: 'app-root',
  template: '...'
})
export class AppComponent {
  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        console.log('导航开始:', event.url);
      }
      
      if (event instanceof NavigationEnd) {
        console.log('导航结束:', event.url);
      }
      
      if (event instanceof NavigationError) {
        console.error('导航错误:', event.error);
      }
    });
  }
}

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    data: {
      title: '管理后台',
      breadcrumb: '管理',
      requiresAuth: true
    }
  }
];

@Component({
  template: '<h1>{{ title }}</h1>'
})
export class AdminComponent implements OnInit {
  title: string;
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    this.route.data.subscribe(data => {
      this.title = data['title'];
    });
  }
}

import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<User> {
  constructor(private userService: UserService) {}
  
  resolve(route: ActivatedRouteSnapshot): Observable<User> {
    const id = route.paramMap.get('id');
    return this.userService.getUser(+id);
  }
}

// 路由配置
const routes: Routes = [
  {
    path: 'users/:id',
    component: UserDetailComponent,
    resolve: {
      user: UserResolver
    }
  }
];

// 组件中使用
@Component({
  template: '<p>{{ user?.name }}</p>'
})
export class UserDetailComponent implements OnInit {
  user: User;
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    this.route.data.subscribe(data => {
      this.user = data['user'];
    });
  }
}