角度路由器导航基本href

在 Angular 中，导航是应用程序中极为重要的一部分。在 Angular 应用程序中，导航通常由链接和按钮触发，并使用 Router 模块来管理 URL 和视图之间的映射。

本文将介绍 Angular 路由器中针对 href 基本导航的用法。

准备工作

在我们开始学习 Angular 路由器的导航功能之前，需要对 Angular 的基本概念有一些了解。在本文的后续部分，我们将涉及 Angular 模块、组件和路由器等基本概念，如果还不熟悉的话，可以先去了解一下。

基本用法

在 Angular 中，我们可以使用 routerLink 指令实现基本的导航功能。routerLink 指令可以用来在组件之间进行导航，并且可以根据路由配置进行 URL 的生成。

下面是一个简单的示例：

<a routerLink="/">Home</a>
<a routerLink="/about">About</a>

在上面的示例中，我们定义了两个链接，分别对应了应用程序的首页和关于页面。routerLink 指令的值是一个字符串，表示要导航到的路由。

需要注意的是，routerLink 指令的值应该以斜杠 / 开头，表示绝对路径。如果以相对路径开头，会导致路由出错。

在使用 routerLink 指令时，需要在组件的模块中导入 RouterModule 模块，并把路由信息添加到 Routes 数组中，如下所示：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

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

在上述示例中，我们通过 const routes 定义了三个路由：

• ' '：重定向到 /home
• '/home'：Home 组件
• '/about'：About 组件

然后，在模块中通过 imports 属性将 RouterModule.forRoot(routes) 添加到导入列表中，完成路由器的配置。

高级用法

除了基本用法外，Angular 路由器还提供了很多高级用法，可以让我们更加灵活地控制导航行为。下面是一些常见的高级用法示例。

带参数的导航

有时我们需要在不同的组件之间传递参数，以实现更加复杂的导航功能。Angular 路由器提供了多种参数传递方式，下面是一种基于 URL 参数的传递方式。

在组件的模板中，我们可以使用 [routerLink] 指令来动态生成带参数的链接，如下所示：

<a [routerLink]="['/user', user.id]">{{ user.name }}</a>

在上面的示例中，我们使用了数组来表示 URL，数组的第一项表示路由路径，第二项表示参数。在 URL 中的参数可以使用冒号 : 前缀进行声明，如下所示：

const routes: Routes = [
  { path: 'user/:id', component: UserComponent },
];

在上述示例中，我们声明了一个名为 id 的参数，它将从 URL 中获取，并通过 UserComponent 获取和处理。

编程式导航

有时我们需要根据业务逻辑进行导航，而不是依赖于用户的点击行为。此时，可以使用 Angular 路由器提供的 Router 服务。

在组件中，我们可以通过 Router 服务实现编程式导航，如下所示：

export class MyComponent {
  constructor(private router: Router) {}

  navigateTo(route: string): void {
    this.router.navigate([route]);
  }
}

在上述示例中，我们在组件的构造函数中注入了 Router 服务，在需要导航的时候调用 router.navigate 方法，传入需要跳转的路由路径即可。

路由守卫

有时我们需要对路由进行控制，例如在用户未登录时禁止访问某些页面。此时，可以使用路由守卫来实现。

路由守卫是一个服务，可以在导航到某个路由时进行预处理，在导航完成后进行后处理。

Angular 路由器提供了多种守卫接口，包括 CanActivate、CanActivateChild、CanDeactivate、Resolve 和 CanLoad，分别用于不同的用途。

下面是一个使用 CanActivate 守卫的示例：

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

const routes: Routes = [
  { path: 'admin', canActivate: [AuthGuard], component: AdminComponent },
];

在上述示例中，我们创建了一个名为 AuthGuard 的路由守卫，用于检查用户是否登录。如果用户已经登录，则通过 canActivate 方法返回 true，路由器将允许导航。如果用户未登录，则通过 canActivate 方法返回 false，路由器将阻止导航，并重定向到登录页面。

总结

在本文中，我们介绍了 Angular 路由器中针对 href 基本导航的用法，以及一些常见的高级用法，包括带参数的导航、编程式导航和路由守卫等。

Angular 路由器作为 Angular 框架的核心功能之一，可以帮助我们实现复杂的前端路由控制。如果你正在进行 Angular 开发，那么熟练掌握 Angular 路由器的使用方法是非常必要的。