路由导入
Angular是一个可选服务，它用来呈现指定的URL所对应的视图。
在app-routing.module.ts文件中导入 import { Routes, RouterModule } from '@angular/router';
路由定义的5钟方法
const routes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroListComponent, data: { title: 'Heroes List' } },
{ path: '', redirectTo: '/index', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
路由数组routes描述如何进行导航，把它传给RouterModule.forRoot()方法并传给本模块的imports数组就可以配置路由。如下图。
配置路由
每个定义都被翻译成一个Route对象，每个对象有一个path属性，表示该路由的URL路径部分，component属性，表示与该路由关联的组件。 注意，path 不能以斜杠（/）开头。 路由器会为解析和构建最终的 URL，这样在应用的多个视图之间导航时，可以任意使用相对路径和绝对路径。
第一种路由中，路由路径是具体的静态路由，最常见，使用次数最多，按照规范写即可。
第二种路由中，id是一个路由参数的令牌(Token)。比如 /hero/42 这个 URL 中，“42”就是 id 参数的值。 此 URL 对应的 HeroDetailComponent 组件将据此查找和展现 id 为 42 的英雄。
第三种路由中，data 属性用来存放于每个具体路由有关的任意信息。该数据可以被任何一个激活路由访问，并能用来保存诸如 页标题、面包屑以及其它静态只读数据。
第四种路由中，空路径（''）表示应用的默认路径，当 URL 为空时就会访问那里，因此它通常会作为起点。 这个默认路由会重定向到 URL /heroes，并显示 HeroesListComponent。
第五种路由钟，** 路径是一个通配符。当所请求的 URL 不匹配前面定义的路由表中的任何路径时，路由器就会选择此路由。 这个特性可用于显示“404 - Not Found”页，或自动重定向到其它路由。由于路由器使用先匹配者优先策略来选择路由。通配符路由是路由配置中最没有特定性的那个，所以必须将它配置为最后一个路由。
路由出口
RouterOutlet 是一个来自路由模块中的指令，它的用法类似于组件。 它扮演一个占位符的角色，用于在模板中标出一个位置，路由器将会把要显示在这个出口处的组件显示在这里。
路由出口
路由链接的激活状态
RouterLinkActive 指令会基于当前的 RouterState为活动的 RouterLink切换所绑定的 css，如 routerLinkActive="..."
当此链接指向的路由激活时，该指令就会往宿主元素上添加一个 CSS 类,如：
<a routerLink="/user/bob" routerLinkActive ="active-link">Bob</a>
当浏览器的当前 url 是 '/user' 或 '/user/bob' 时，就会往 a 标签上添加 active-link 类； 如果 url 发生了变化，则移除它。
也可以设置一个或多个类，如：
<a routerLink="/user/bob" routerLinkActive ="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>
可以通过传入 exact: true 来配置 RouterLinkActive。这样，只有当 url 和此链接精确匹配时才会添加这些类。
<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}"> Bob </a>
可以把 routerLinkActive 的实例赋给一个模板变量，以直接检查 isActive 的状态。
<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
Bob {{ rla.isActive ? '(already open)' : ''}}
</a>
最后，你还可以把 routerLinkActive指令用在 RouterLink 的各级祖先节点上。
<div routerLinkActive="active-link">
<a routerLink="/user/jim">Jim</a>
<a routerLink="/user/bob">Bob</a>
</div>
这样，无论当前 url 是 '/user/jim' 还是 '/user/bob'，都会往 div 标签上添加一个 active-link 类。
路由事件
在每次导航中，Router 都会通过 Router.events 属性发布一些导航事件。这些事件的范围涵盖了从开始导航到结束导航之间的很多时间点。下表中列出了全部导航事件：
NavigationStart: 本事件会在导航开始时触发。
RouteConfigLoadStart: 本事件会在 Router惰性加载某个路由配置之前触发。
RouteConfigLoadEnd: 本事件会在惰性加载了某个路由后触发。
RoutesRecognized: 本事件会在路由器解析完 URL，并识别出了相应的路由时触发
GuardsCheckStart: 本事件会在路由器开始 Guard 阶段之前触发。
ChildActivationStart: 本事件会在路由器开始激活路由的子路由时触发。
ActivationStart: 本事件会在路由器开始激活某个路由时触发。
GuardsCheckEnd: 本事件会在路由器成功完成了 Guard 阶段时触发。
ResolveStart: 本事件会在 Router 开始解析（Resolve）阶段时触发。
ResolveEnd: 本事件会在路由器成功完成了路由的解析（Resolve）阶段时触发。
ChildActivationEnd: 本事件会在路由器激活了路由的子路由时触发。
ActivationEnd: 本事件会在路由器激活了某个路由时触发。
NavigationEnd: 本事件会在导航成功结束之后触发。
NavigationCancel: 本事件会在导航被取消之后触发。 这可能是因为在导航期间某个路由守卫返回了 false。
NavigationError: 这个事件会在导航由于意料之外的错误而失败时触发。
Scroll: 本事件代表一个滚动事件。
网友评论