SIX angular 路由
本帖最后由 周大胖子 于 2018-4-25 09:44 编辑1.添加angular 路由器 ；
2.使用 <a > 标签 和 一个 <router-outlet>把 app.component 转换成一个导航用的壳组件；
3.在 app.routing.module 中配置路由器
4.简单路由，重定向路由 ， 参数化路由。
5.<a>标签的 routerLink 指令
6.多组间共享 heroService
在已有的项目中输入命令：
ng generate module app-routing --flat --module=app注释： --flat 把这个文件放入src/app中， 而不是单独的目录中。 --module=app 告诉CLI 把它注册到 app.module.ts的imports数组中
第一步：生成一个带路由的项目
cd C:\xiangmu====== ng new angular-routing-demo --routing
【angular-routing-demo居然是项目名：讲课老师估计是疯了
这个项目比别的项目多了一个路由配置文件app/app-routing.module.ts
并且在app.module.ts文件里已经引入了路由模块，并且已经注入】
【】
第二步：创建组件
=ng g component components/模块
第三步：在app-routing.module.ts文件里
import { HemoComponent } from './components/hemo/hemo.component
import { NewsComponent } from './components/news/news.component
import { UserComponent } from './components/user/user.component
第四步：配置路由
const routes: Routes = [
{
path:'hemo',
component:HemoComponent, //确定模块
children:[] //配置子组件的地方
},
{
path:'news',
component:NewsComponent, //确定模块
children:[] //配置子组件的地方
}
]
第五步：增加导航：
导航跳转的a标签不是href 而是routerLink="模块"
例如：<li><a routerLink="news" >新闻</a></li>
第六步：
第一种玩法6.1设置空路由【即在没有链接时候默认显示的路由值】
{
path:"",
redirectTo:"hemo",
pathMatch:"full"
}
第二种玩法6.2//设置匹配路由出错或者匹配不到路有时候加载的组件 可以替代上面的空路由
{
path:'**',//表示任意路由【去掉404了】
// component:HemoComponent, //确定模块
redirectTo:"hemo"
//redirectTo这个与component不同，这是默认跳转路由URL改变，comp是加载模块不改变url
}
路由的 导航 a 标签 写法
选中路由加载的class为active ======= routerLinkActive="active"
<ul class="lis_nav">
<li><a routerLink="hemo" routerLinkActive="active" >首页</a></li>
<li><a routerLink="news" routerLinkActive="active" >新闻</a></li>
<li><a routerLink="user" routerLinkActive="active" >用户</a></li>
</ul> 动态路由 列表页与详情页
原理：通过动态路由、向详情页传值【这个值是在url里】
（传值的两种方式 1.动态路由 newsinfo/aid 2.URL拼接：newsinfo?id=3）
第一步：在app-routing.modules.ts文件里 引入newsinfo组件
import { NewsinfoComponent } from './components/newsinfo/newsinfo.component
第二步：配置动态路由样子和以前一样 /:aid
{
// 动态路由、/:aid
path:'newsinfo/:aid',
component:NewsinfoComponent
},
第三步：在news的html文件写入跳转到详情页的链接
例如：
<li><a routerLink="/newsinfo/1" >新闻标题1</a></li>
<li><a routerLink="/newsinfo/2">新闻标题2</a></li>
<li><a routerLink="/newsinfo/3">新闻标题3</a></li>
第四步：在newsinfo的ts文件里引入模块 ActivatedRoute 用于接收动态路由的值
import { ActivatedRoute } from '@angular/router
第五步：在下方的构造函数内申明该模块【就是实例化的意思】
constructor( private route:ActivatedRoute ) { }
第六步：初始化时，获取该值 params里的aid，并做相应的处理【拿值向后台请求数据】
ngOnInit() {
this.route.params.subscribe(function(e){
console.log(e)
// alert(e.aid)
})
} 路由的JS跳转【例如登录后的跳转】
第一步：在登录的.ts文件里【即没跳的页面】引入Router模块
import { Router } from '@angular/router
第二步：初始化【即实例化】
constructor(private router:Router ) { }
第三步：JS路由跳转
this.router.navigate(['/news'])
【
备注：跳转到动态路由，需要带上参数 否则则按照找不到路由处理，
// 第二个参数用 ， 隔开 系统会自动拼接，第三个参数再加 ，号
this.router.navigate(['/newsinfo','123'])
】 路由的 git传参
原理：用的是JS传参的方式，配置参数
准备工作：在路由app-routing.module.ts文件里引入模块并写入路由【注意写法，我被坑的好惨】
引入模块：import { LlkComponent } from './components/llk/llk.component 写入路由：
{
path:'llk', //这是get传值的写法
component:LlkComponent
},
第一步：在【即没跳的页面】的.ts文件里引入NavigationError 模块并写函数
import { Router , NavigationError } from '@angular/router
// GIT传参
gollk(aid,mav,name){
let navigationExtras:NavigationExtras={
queryParams:{
'aid': aid,
'mvt': mav,
'user': name
}
};
// this.router.navigate(['/llk','abc'])
// get后面的参数是拼进去的
this.router.navigate(['/llk'],navigationExtras)
}
第二步：在跳转到的.ts文件里 引入JS时候使用的跳转接收模块
import { ActivatedRoute } from '@angular/router
第三步：在跳转到的.ts文件里申明
constructor(private route:ActivatedRoute ) { }
第四步：接收值
this.route.queryParams.subscribe(function(e){
console.log(e)
})
【注意：
//params获取动态路由
// get传值使用 queryParams 接收
】 父子路由
第一步：创建子组件。在app-routing.module.ts文件里引入要路由的模块。 并配置
{
path:'user',
component:UserComponent,
//配置子路由
children:[
{
path:'bbk',
component:BbkComponent
},
{
path:'bbl',
component:BblComponent
}
]
},
第二步：将子路由模块引入到父路由的.ts的文件里 注意路径
第三部：父组件的.html中定义
<router-outlet></router-outlet>
第四步：标签
<a routerLink="bbl"routerLinkActive="active">跳转到BBL</a>
页:
[1]