透视Angular Router中的常用类，领略路由信息处理之道

Angular Router是一个强大的库，它提供了管理Angular应用程序中导航和路由的功能。它包括几个重要的类，用于处理路由信息，实现导航，管理URL和参数，设置守卫，创建路由器和路径，以及加载组件。

Router

Router是Angular Router模块中最重要的类之一。它负责管理应用程序中的路由和导航。它提供了一系列方法来管理路由，包括：

• navigateByUrl(url)：根据提供的URL导航到新的路由。
• navigate(commands)：根据提供的命令导航到新的路由。
• createUrlTree(commands)：创建一个新的URL树。
• serializeUrl(urlTree)：将URL树序列化为字符串。
• parseUrl(url)：将字符串解析为URL树。

ActivatedRoute

ActivatedRoute类表示当前激活的路由。它提供了一系列属性和方法来访问有关当前路由的信息，包括：

• params：一个包含当前路由参数的键值对对象。
• queryParams：一个包含当前路由查询参数的键值对对象。
• fragment：当前路由的片段。
• data：一个包含当前路由数据的对象。
• snapshot：一个包含当前路由状态的快照。

Route

Route类表示单个路由。它包括以下属性：

• path：路由的路径。
• component：与路由关联的组件。
• children：子路由的数组。
• canActivate：一个守卫数组，用于决定是否允许导航到此路由。
• canActivateChild：一个守卫数组，用于决定是否允许导航到此路由的子路由。
• canDeactivate：一个守卫数组，用于决定是否允许离开此路由。
• canLoad：一个守卫，用于决定是否允许加载此路由。
• data：一个包含此路由数据的对象。

RouterConfig

RouterConfig是一个数组，其中包含Route对象的集合。它用于配置Angular应用程序的路由。

RouterOutlet

RouterOutlet指令用于在模板中指定要加载路由组件的位置。

RouterModule

RouterModule是Angular Router模块中的一个模块。它提供了一系列服务和指令，用于在Angular应用程序中实现路由。

使用Angular Router

要使用Angular Router，首先需要在Angular应用程序的根模块中导入RouterModule。然后，您需要配置路由器。这可以通过创建一个RouterConfig数组并将其传递给RouterModule.forRoot()方法来完成。

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

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

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

接下来，您需要在模板中使用RouterOutlet指令来指定要加载路由组件的位置。

<router-outlet></router-outlet>

最后，您可以在组件中使用Router类来导航到新的路由。

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  navigateToAbout() {
    this.router.navigateByUrl('/about');
  }

}