angular的router的使用

Angular 的路由器（Router）是用于在应用中进行页面导航和路由管理的核心模块。下面是使用 Angular 路由器的基本步骤：

1. 配置路由器：
- 在应用的根模块（通常是 `app.module.ts`）中导入 `RouterModule` 和 `Routes`。
- 在 `imports` 数组中使用 `RouterModule.forRoot()` 方法来配置路由器，并传入一个定义路由的数组。

下面是一个示例：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

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

在上面的示例中，我们创建了一个名为 `AppRoutingModule` 的路由模块，并使用 `RouterModule.forRoot()` 方法来配置路由器。在 `routes` 数组中定义了多个路由，包括默认重定向、路径和对应的组件。

2. 在模板中显示路由链接和视图：
- 在模板文件中使用 `<a routerLink>` 指令来创建路由链接。
- 使用 `<router-outlet>` 元素来显示当前路由的对应视图。

下面是一个示例：

<ul>
  <li><a routerLink="/home">Home</a></li>
  <li><a routerLink="/about">About</a></li>
  <li><a routerLink="/contact">Contact</a></li>
</ul>

<router-outlet></router-outlet>

在上面的示例中，我们使用 `<a routerLink>` 创建了三个路由链接，分别对应不同的路径。通过 `<router-outlet>` 元素，当前路由的对应组件将会被显示在这个位置。

3. 在组件中进行导航：
- 在需要进行导航的组件中导入 `Router` 服务。
- 在构造函数中注入 `Router` 服务。
- 使用 `Router` 服务提供的方法进行导航，如 `navigate()` 方法。

下面是一个示例：

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

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="goToAbout()">Go to About</button>
  `
})
export class MyComponent {
  constructor(private router: Router) { }

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

在上面的示例中，我们在组件类 `MyComponent` 中注入了 `Router` 服务，并使用 `navigate()` 方法来进行导航到 `/about` 路由。

通过以上步骤，你就可以使用 Angular 的路由器来进行页面导航和路由管理。可以根据路由配置定义不同的路径和对应的组件，通过链接或编程方式进行导航到不同的路由，并在对应的组件中显示对应的视图。