Angular 2-路由介绍

什么是路由？

路由指的是在单页应用程序中，不同的页面或视图之间进行导航的过程。在某些情况下，我们想要在程序中展示不同的页面或视图，这时路由就派上用场了。

在 Angular 中，路由允许我们定义多个组件，将它们关联到 URL，并在用户导航到 URL 时动态加载这些组件。

Angular 中的路由

在 Angular 应用程序中，路由通过 Angular 的 RouterModule 管理。RouterModule 允许我们在程序中定义多个 URL 路由，并将不同的组件与这些路由关联。当用户导航到某个 URL 时，Angular 将会根据这个 URL 显示相应的组件。

首先，我们需要在 Angular 应用程序中导入 RouterModule：

import { RouterModule } from '@angular/router';

接下来，我们需要在应用程序中定义多个路由。我们可以通过 RouterModule.forRoot() 方法来定义路由：

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: '', component: HomeComponent },
            { path: 'post/:id', component: PostComponent },
            { path: '**', component: NotFoundComponent }
        ])
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {}

上面的代码定义了三个路由：

• 当用户访问首页时，将显示 HomeComponent 组件。
• 当用户访问 /post/:id 路径时，将动态加载带有指定 ID 的 PostComponent 组件。
• 当用户访问无法识别的路径时，将显示 NotFoundComponent 组件。

路由的 path 属性表示 URL 路径，component 属性表示与这个 URL 路径关联的组件。

使用路由

要在程序中使用路由，我们需要在组件的 HTML 模板中添加路由链接。我们可以使用 Angular 的 routerLink 指令来创建路由链接。例如，下面的代码会创建一个到 /posts 路由的链接：

<a routerLink="/posts">Posts</a>

我们还可以将路由链接绑定到组件中的属性。例如，如果我们有一个 postId 属性来表示要查看的帖子 ID，那么我们可以使用下面的代码来创建一个链接：

<a [routerLink]="['/post', postId]">View post {{ postId }}</a>

最后，我们需要在应用程序组件中添加一个占位符来显示路由组件。我们可以使用 <router-outlet> 元素来创建这个占位符。例如，下面的代码会将 HomeComponent 组件渲染到应用程序中：

<router-outlet></router-outlet>

总结

Angular 的路由允许我们在应用程序中定义多个 URL 路由，并将不同的组件与这些路由关联。要使用路由，我们需要使用 RouterModule 导入路由模块，并在应用程序中定义路由。在组件中，我们可以使用 routerLink 指令来创建路由链接，并使用 <router-outlet> 元素来显示路由组件。