详解Angular4 路由设置相关

在Angular4中，路由是应用导航的核心机制，它允许用户通过点击链接或程序代码在不同的视图之间导航。本文将详细解析Angular4的路由设置，包括基本配置、多路由处理、路由链接及组件间的路由调用，以及路由守卫的概念。 1. **路由相关配置** 在Angular4中，首先需要导入`RouterModule`和`Routes`类型，它们位于`@angular/router`模块中。然后定义路由配置对象`routers`，这是一个包含不同路径和对应组件的数组。例如，`path: ''`对应空路径，会加载`LoginComponent`作为默认页面。`path: 'detail/:id'`则是一个带有动态参数的路径，这里的`:id`可以捕获路径中的一部分作为参数。`loadChildren`用于懒加载模块，这里加载了`DemoModule`。`path: '**'`是一个通配符路径，用于处理所有未匹配的路径，通常将其重定向到默认页面。 ```typescript const routers: Routes = [ { path: '', component: LoginComponent }, { path: 'detail/:id', component: LoginComponent }, { path: 'other', loadChildren:"./demo/demo.module#demoModule" }, { path: '**', pathMatch: 'full', redirectTo: '' } ]; ``` `RouterModule.forRoot(routers)`用于创建主路由模块，并在`NgModule`的`imports`中引入。 2. **多路由处理** 多路由处理涉及到了`outlet`的概念，允许在同一个位置显示多个组件。例如，定义了两个具有相同路径但不同`outlet`的路由，`outlet: 'let1'`和`outlet: 'let2'`，在模板中使用不同的`router-outlet`来分别显示`NewsComponent`和`News2Component`。 ```typescript { path: 'news', outlet: 'let1', component: NewsComponent }, { path: 'news', outlet: 'let2', component: News2Cmponent } ``` 3. **路由链接及组件中调用路由方法** `routerLink`指令用于在HTML中创建链接，`routerLinkActive`则在当前路由匹配时添加CSS类。在组件中，可以使用`this.router.navigate()`方法来编程式地切换路由，也可以使用`this.router.navigateByUrl()`方法指向完整的绝对路径。 ```html <a routerLink="/detail/1" routerLinkActive="active">detail</a> <a [routerLink]="['/detail', news.id]">{{news.title}}</a> <a [routerLink]="[{ outlets: { let2: ['news'] } }]">Contact</a> ``` 4. **路由守卫** 路由守卫(`CanActivate`)是Angular提供的一种机制，用于在路由被激活之前进行额外的检查。比如在后台管理系统中，我们可能需要确保用户已登录才能访问某些路由。创建一个服务类`AuthService`实现`CanActivate`接口，其中的`canActivate()`方法返回一个布尔值，决定是否允许激活该路由。 ```typescript @Injectable() export class AuthService implements CanActivate { canActivate() { // 判断登录状态 return true; } } ``` 然后在路由配置中引用这个守卫： ```typescript { path: '', component: LoginComponent, canActivate: [AuthService] } ``` 路由守卫使得开发者能够控制路由的访问权限，增加了应用的安全性。 总结来说，Angular4的路由设置涵盖了从基础配置到高级特性的全面应用，包括路由配置、多路由处理、路由链接的使用和路由守卫的实现。这些功能让开发者能够构建功能丰富且具有复杂导航结构的单页应用程序。