在 Angular 中，路由是一个强大的功能，它允许我们根据不同的路径展示不同的组件。本教程将带你深入了解 Angular 的高级路由功能。

路由守卫

路由守卫是 Angular 路由系统中的一个重要概念，它可以用来控制用户能否访问某个路由。以下是一些常用的路由守卫：

  • CanActivate: 用于检查用户是否有权限访问某个路由。
  • CanActivateChild: 用于检查子路由是否有权限被访问。
  • Resolve: 用于在进入路由之前获取数据。
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    // 在这里实现你的认证逻辑
    return true;
  }
}

路由参数

路由参数允许我们在路由路径中传递动态数据。以下是如何使用路由参数：

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

@Component({
  selector: 'app-dynamic-component',
  template: `{{ id }}`
})
export class DynamicComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
  }
}

路由嵌套

路由嵌套允许我们在子路由中展示不同的组件。以下是如何实现路由嵌套：

{
  path: 'users',
  component: UsersComponent,
  children: [
    {
      path: ':id',
      component: UserComponent
    }
  ]
}

图片示例

Angular Logo

扩展阅读

想要了解更多关于 Angular 路由的知识，可以阅读以下文章：

返回首页