Angular 2 中的路由和导航

路由器

当谈到构建现代Web应用程序时，Angular 2提供了强大的路由和导航功能，使得管理不同视图和页面之间的导航变得更加简单和高效。通过Angular的路由器模块，开发者可以轻松地定义应用程序的不同状态和页面，并在这些状态之间进行流畅的切换。

配置路由

首先，让我们了解如何配置Angular 2中的路由。在Angular应用中，我们需要使用Angular的RouterModule来设置和管理路由。以下是一个简单的示例，演示了如何配置基本的路由器和定义多个路由：

typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }, // 默认路由
  { path: '', redirectTo: '/home' }, // 未匹配路由重定向至主页
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上面的示例中，我们定义了三个基本路由：'home'、'about'和'contact'，分别对应着不同的组件。同时，我们还设置了默认路由以及当URL不匹配任何已知路由时的重定向规则。

使用路由链接和导航

一旦路由器配置完成，我们就可以在应用中使用路由链接来实现导航。在模板中，可以使用routerLink指令来创建导航链接，示例如下：

html
<nav>
  Home
  About
  Contact
</nav>
<router-outlet></router-outlet>

以上代码展示了一个简单的导航菜单，使用routerLink指令将不同的路由链接到对应的组件。用于显示当前路由对应的组件内容。

路由参数传递

除了基本的路由导航外，Angular的路由器还支持传递参数。这使得我们能够在导航过程中传递数据或参数给目标组件。以下是一个示例，展示了如何传递和接收路由参数：

typescript
// 在路由配置中设置带参数的路由
{ path: 'product/:id', component: ProductDetAIlComponent }
// 在组件中获取参数
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {
  this.route.params.subscribe(params => {
    this.productId = params['id']; // 获取路由参数
  });
}

在这个示例中，路由配置中的/:id表示该路由期望一个名为'id'的参数，并将其传递给ProductDetAIlComponent组件。在组件中，我们使用ActivatedRoute服务来订阅路由参数的变化，并在回调中获取参数的值。

通过以上配置和示例，Angular 2中的路由和导航功能使得开发者能够轻松管理应用程序中不同视图之间的导航和状态，为构建现代化的Web应用提供了强大的支持。