Angular routing and 导航

Angular routingoverview

Angular routing (Angular Router) is Angular framework coremodule之一, 用于implementation单页application (SPA) 页面导航 and routingmanagement.

1. routingmodule configuration

要using Angular routing, 首先需要import and configurationroutingmodule.

1.1 installationroutingmodule

Angular routingmodule is Angular coremodule之一, 通常 in creationproject时可以选择添加. such as果没 has 添加, 可以手动configuration:

ng generate module app-routing --flat --module=app

1.2 routingmodule basicstructure

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

// 定义routingconfiguration
const routes: Routes = [
  { path: '', component: HomeComponent }, // 默认routing
  { path: 'about', component: AboutComponent }, // 关于页面routing
  { path: 'contact', component: ContactComponent }, // 联系页面routing
  { path: '**', redirectTo: '' } // 通配符routing, 匹配所 has undefined routing
];

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

1.3 in 根moduleinimportroutingmodule

// app.module.ts
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // importroutingmodule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1.4 in 模板in添加routing出口

in 根component模板in添加 <router-outlet> 指令, 用于显示当 before routing for 应 component:

// app.component.html

2. routing导航

Angular providing了 many 种导航方式:

2.1 using routerLink 指令

in 模板inusing routerLink 指令for导航:

首页


产品list
About Us


电子产品


团队介绍


首页
About Us

2.2 using Router service

in componentclassinusing Router servicefor导航:

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

@Component({
  // ...
})
export class HomeComponent {
  constructor(private router: Router) { }

  navigateToAbout() {
    this.router.navigate(['/about']);
  }

  navigateToProduct(id: number) {
    this.router.navigate(['/product', id]);
  }

  navigateWithQueryParams() {
    this.router.navigate(['/products'], { 
      queryParams: { category: 'electronics' },
      fragment: 'top'
    });
  }
}

3. 动态routing

动态routing允许我们根据不同 parameter显示不同 in 容, 例such as产品详情页面.

3.1 定义动态routing

// app-routing.module.ts
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  // ...
  { path: 'product/:id', component: ProductDetailComponent } // 动态routing, :id  is routingparameter
];

3.2 获取routingparameter

in componentinusing ActivatedRoute service获取routingparameter:

// product-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 获取routingparameter (snapshot方式, 只 in component初始化时获取一次) 
    this.productId = this.route.snapshot.paramMap.get('id');
    
    // subscriberoutingparameter变化 (适用于同一routingparameter变化 circumstances) 
    this.route.paramMap.subscribe(params => {
      this.productId = params.get('id');
      // 根据产品ID加载产品data
      this.loadProduct(this.productId);
    });
  }

  loadProduct(id: string) {
    // 加载产品data 逻辑
    console.log('加载产品:', id);
  }
}

4. 嵌套routing

嵌套routing允许我们 in 一个component in 部显示另一个component, implementation complex 页面structure.

4.1 定义嵌套routing

// app-routing.module.ts
import { ProductsComponent } from './products/products.component';
import { ProductListComponent } from './products/product-list/product-list.component';
import { ProductAddComponent } from './products/product-add/product-add.component';
import { ProductEditComponent } from './products/product-edit/product-edit.component';

const routes: Routes = [
  // ...
  {
    path: 'products',
    component: ProductsComponent,
    children: [ // 嵌套routingconfiguration
      { path: '', component: ProductListComponent }, // 产品list
      { path: 'add', component: ProductAddComponent }, // 添加产品
      { path: 'edit/:id', component: ProductEditComponent } // 编辑产品
    ]
  }
];

4.2 in 父componentin添加routing出口

// products.component.html
产品management

 

5. routing守卫

routing守卫用于控制routing 访问permission, 例such asverificationuser is 否login, checkuserpermissionetc..

5.1 常用 routing守卫class型

• CanActivate: 控制 is 否允许进入routing
• CanDeactivate: 控制 is 否允许离开routing
• CanLoad: 控制 is 否允许加载latency加载 module
• Resolve: in routing激活 before 预加载data

5.2 creationrouting守卫

ng generate guard auth

5.3 implementation CanActivate 守卫

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } 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 | Promise | boolean | UrlTree {
    
    if (this.authService.isLoggedIn()) {
      return true; // 允许访问
    } else {
      // 重定向 to login页面
      return this.router.createUrlTree(['/login']);
    }
  }
}

5.4 in routinginusing守卫

// app-routing.module.ts
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  // ...
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard] // 添加routing守卫
  }
];

6. latency加载module

latency加载 (Lazy Loading) 允许我们 in 需要时才加载module, improvingapplication 初始加载速度.

6.1 creationlatency加载module

ng generate module admin --route admin --module app

6.2 configurationlatency加载routing

// app-routing.module.ts
const routes: Routes = [
  // ...
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) // latency加载module
  }
];

7. routing best practices

1. usingmodule化routingconfiguration, 将不同functionsmodule routing分离 to 不同 routingmodulein
2. 优先usinglatency加载, improvingapplication 初始加载速度
3. usingrouting守卫保护敏感routing, 防止未authorization访问
4. using Resolve 守卫 in routing激活 before 预加载data, improvinguser体验
5. using绝 for pathfor导航, 避免相 for path可能带来 issues
6. for 所 has routing添加适当 标题 and 元data, has 利于 SEO