Angular学习笔记之-10.路由
路由
定义你的各个路由
1.任务:
1.路由 /crisis-center 用来打开 crisis-center 组件。
2.路由 /heroes-list 用来打开 heroes-list 组件。
2.相关代码
/* src/app/app.module.ts */
imports: [
BrowserModule,
RouterModule.forRoot([
{path: 'crisis-list', component: CrisisListComponent},
{path: 'heroes-list', component: HeroesListComponent},
]),
],
更新你的组件以添加 router-outlet
1.任务:
1.需要更新模板，以便根据 URL 路径动态加载一个组件。
2.相关代码
/* src/app/app.component.html */
<router-outlet></router-outlet>
用 UI 元素控制导航
1.任务:
1.添加按钮进行导航。
2.相关代码
/* src/app/app.component.html */
<nav>
<a class="button" routerLink="/crisis-list">Crisis Center</a> |
<a class="button" routerLink="/heroes-list">Heroes</a>
</nav>
<router-outlet></router-outlet>
标出活动路由
1.任务:
1.添加导航按钮为激活时候的css样式。
2.相关代码
/* src/app/app.component.html */
<nav>
<a class="button" routerLink="/crisis-list" routerLinkActive="activebutton">Crisis Center</a> |
<a class="button" routerLink="/heroes-list" routerLinkActive="activebutton">Heroes</a>
</nav>
<router-outlet></router-outlet>
/* src/app/app.component.css */
.button {
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color: #ffffff;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
outline: 0;
}
.activebutton {
box-shadow: inset 0px 1px 0px 0px #dcecfb;
background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
background-color: #bddbfa;
border-radius: 6px;
border: 1px solid #84bbf3;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #528ecc;
outline: 0;
}
添加一个重定向
1.相关代码
/* src/app/app.module.ts */
imports: [
BrowserModule,
RouterModule.forRoot([
{path: 'crisis-list', component: CrisisListComponent},
{path: 'heroes-list', component: HeroesListComponent},
{path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
]),
],
添加 404 页面
1.相关代码
/* src/app/app.module.ts */
imports: [
BrowserModule,
RouterModule.forRoot([
{path: 'crisis-list', component: CrisisListComponent},
{path: 'heroes-list', component: HeroesListComponent},
{path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
{path: '**', component: PageNotFoundComponent}
]),
],
路由器教程：英雄之旅
里程碑 1:起步
重点:
1.当用户单击某个链接时，该示例应用可以在两个视图之间切换。
里程碑 2：路由模块
重点:
1.将路由配置重构为路由模块
里程碑 3: 特征区
重点:
1.模块导入顺序
请注意该模块的 imports 数组，AppRoutingModule 是最后一个,路由配置的顺序很重要，因为路由器会接受第一个匹配上导航所要求的路径的那个路由。当所有路由都在同一个 AppRoutingModule 时，你要把默认路由和通配符路由放在最后（这里是在 /heroes 路由后面）， 这样路由器才有机会匹配到 /heroes 路由，否则它就会先遇到并匹配上该通配符路由，并导航到“页面未找到”路由。
2.路由参数
带参数的路由定义
{ path: 'hero/:id', component: HeroDetailComponent } //localhost:4200/hero/15
在列表视图中设置路由参数
<a [routerLink]="['/hero', hero.id]">
3.ActivatedRoute 实战
里程碑 4: 危机中心
重点:
1.带有子路由的危机中心
const crisisCenterRoutes: Routes = [
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
2.用命名出口（outlet）显示多重路由
<!-- src/app/app.component.html -->
<div [@routeAnimation]="getAnimationData(routerOutlet)">
<router-outlet #routerOutlet="outlet"></router-outlet>
</div>
<router-outlet name="popup"></router-outlet>
添加第二路由
// src/app/app-routing.module.ts (compose route)
{
path: 'compose',
component: ComposeMessageComponent,
outlet: 'popup'
},
<!-- src/app/app.component.html -->
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
第二路由很像主路由，配置方式也一样。它们只有一些关键的不同点：
它们彼此互不依赖。
它们与其它路由组合使用。
它们显示在命名出口中。
里程碑 5：路由守卫
重点:
1.CanActivate ：需要身份验证
2.CanActivateChild：保护子路由
3.CanDeactivate：处理未保存的更改
4.Resolve: 预先获取组件数据
里程碑 6：异步路由
重点:
1.惰性加载路由配置
2.CanLoad：保护对特性模块的未授权加载
3.自定义预加载策略
4.使用重定向迁移 URL