[入门级]angular学习笔记06
Posted 前端咖秀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[入门级]angular学习笔记06相关的知识，希望对你有一定的参考价值。
关于路由器
路由器就是从一个视图导航到另一个视图的机制
Angular路由器是一个可选的外部Angular NgModule, 名叫RouterModule
路由器包含多种服务（RouterModule）、多种指令（RouterOutlet,RouterLink,RouterLinkActive）、和一套配置（Routes）
index.html
<head>
<base href="/">
...
</head>一个简单的路由器配置
import { RouterModule } from @angular/router;@NgModule({
imports:[
RouterModule.forRoot([
{
path:heroes,
component:heroesComponent
}
])
]
})路由定义包括的内容
component:导航到此路由时，路由器需要创建的组件
解析：这里使用的是forRoot()，因为我们是在应用 根部 提供配置好的路由器，forRoot()方法提供了路由需要的路由服务提供商和指令，并基于当前浏览器URL初始化导航
路由出口（Outlet）
标签添加到模版的底部
RouterOutlet是由RouterModule提供的指令之一，当我们在应用中导航时，路由器就把激活的组件显示在
routerLink
app.component.html
<h1>routerLink</h1>
<a routerLink="/heroes">Heroes</a>
<router-outlet></router/outlet>解析：
我们把RouterLink指令（ROUTER_DIRECTIVES中的另一个指令）绑定到一个字符串，它将告诉路由器，当用户点击链接时，应该导航到哪里
由于这个链接不是动态的，我们只要用 一次性绑定 的方式绑定到路由的路径就可以了
路由器重定向
我们可以用重定向来实现它
{
path:'',
redirectTo:'/dashboard',
pathMatch:'full'}pathMatch的值
full （完全匹配）剩下的未匹配的部分必须等于path时
prefix （匹配开头）剩下的URL以这个跳转路由中的prefix值开头时，就会匹配上这个跳转路由
共享HeroService服务
把HeroService添加到AppModule中的providers数组中，这样就创建了一个HeroService的单例对象，应用中的所有组件都可以使用它
配置带参数的路由
{
path:'detail/:id',
component:'HeroDetailComponent'}解析：路径中的冒号（:）表示 :id 是一个占位符，当导航到这个HeroDetailComponent组件时，它将被填入一个特定英雄的id
HeroDetailComponent
在ngOnInit生命周期钩子中,应该从ActivatedRouter服务的可观察对象params中取得id参数，并通过HeroService服务获取具有这个指定id的英雄数据
ngOnInit():void{
this.route.paramMap
.switchMap((params:ParamMap => this.heroService.getHero(+params.get('id'))))
.subscribe(hero => this.hero = hero)
}以上是关于[入门级]angular学习笔记06的主要内容，如果未能解决你的问题，请参考以下文章