Angular7-路由

Angular7 是一款流行的前端框架之一，而路由则是 Angular7 中的一个重要的特性。路由的作用是帮助我们管理应用的不同页面之间的导航。

路由基础

安装

要使用 Angular7 路由，需要先安装 @angular/router 模块。可以使用以下命令安装：

npm install @angular/router

设置路由

要设置路由，我们需要先定义每一个页面的路径和对应的组件。定义路径和组件的方式为：

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

在代码中，我们定义了两个路径 / 和 /about，并分别对应了 HomeComponent 和 AboutComponent 两个组件。其中 / 表示应用的默认页面。

注册路由

定义好路由之后，还需要在应用模块中注册路由模块。

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

这里我们调用了 RouterModule.forRoot() 方法注册路由模块，然后将其导出以供其他模块使用。

添加路由出口

接下来我们需要为应用添加一个路由出口，可以将路由出口放在应用模板的任何一个位置。这里我们把它放在 <router-outlet> 标签里。

<router-outlet></router-outlet>

路由跳转

当我们设置好路由后，就可以在应用中进行路由跳转了。可以使用 routerLink 指令进行跳转。

<a routerLink="/">Home</a>
<a routerLink="/about">About</a>

这里我们分别使用 routerLink 指令跳转到了 HomeComponent 和 AboutComponent 页面。

路由进阶

参数传递

上面的例子中，我们展示了简单的路由跳转。如果我们需要传递参数呢？

{ path: 'user/:id', component: UserComponent }

在这里，我们定义了一个 user/:id 的路径，并将其对应到了 UserComponent 组件。其中 :id 表示动态路由，它可以是任何数字。

在跳转到该路由时，我们需要使用 routerLink 并同时传递一个 id 参数。

<a [routerLink]="['/user', user.id]">{{ user.name }}</a>

重定向路由

重定向路由可以让我们将一个路由重定向到另一个路由，可以使用以下代码实现：

{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }

在这里，当用户访问应用的根路径时，应用将自动重定向到 home 路径。pathMatch 参数告诉 Angular 只有在完全匹配时才应该执行重定向。

路由守卫

路由守卫可以在进入路由之前或者在路由被解析之前运行某些代码。可以通过以下代码实现路由守卫：

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent, canActivate: [AuthGuard] }
];

这里我们为 about 路由添加了一个 canActivate 属性，它对应了一个 AuthGuard 类，该类实现了 CanActivate 接口。

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate() {
    const authenticated = // 检查用户是否已经认证
    if (!authenticated) {
      this.router.navigate(['/login']);
    }
    return authenticated;
  }
}

这里的 AuthGuard 类实现了 CanActivate 接口，当用户访问 about 路由时，会调用 canActivate 方法进行认证。如果用户未认证，则会跳转到 login 路由。

总结

通过本文的介绍，我们了解了 Angular7 路由的基础和进阶特性。路由是构建大型应用不可或缺的一部分，它可以帮助我们管理应用的不同页面之间的导航。如果你正在构建一个 Angular7 应用，建议你学习并使用 Angular7 路由。