Angular Router 教程

Angular Router 是 Angular 框架中用于创建单页面应用 (SPA) 的路由系统。本教程将带您了解如何使用 Angular Router 来创建和导航到不同的组件。

安装 Angular Router

在开始之前，确保您已经安装了 Angular CLI。然后，使用以下命令安装 Angular Router：

ng add @angular/router

创建路由

首先，您需要在您的 Angular 应用中创建路由配置。这通常在 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';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '**', redirectTo: '' }
];

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

导航到组件

一旦您创建了路由配置，您就可以在组件中使用 Angular Router 来导航到其他组件。

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

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="/">Home</a>
      <a routerLink="/about">About</a>
      <a routerLink="/contact">Contact</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  constructor(private router: Router) { }

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

参数和路由守卫

Angular Router 还支持参数和路由守卫。

参数

要传递参数到路由，您可以在路由路径中使用冒号来定义参数名。

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

路由守卫

路由守卫用于在导航之前执行一些逻辑。

import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';

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

  canActivate(route: ActivatedRouteSnapshot): boolean {
    const isLoggedIn = false; // 假设您有一个登录逻辑
    if (!isLoggedIn) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

更多关于 Angular Router 的信息，请访问我们的官方文档。

[center] [center]