angular---router模块

一原理

1.配置路由器

routerModule.forRoot(routes)---返回一个模块---两个功能
(1) 提供指令 eg：routerLink
(2) 注册提供商---angular要使用router服务
所以在app-routing.module中

exports:[
     可以注释掉，因为routerModule.forRoot(routes)也可以提供指令
    //RouterModule,
]

2.路由器怎么工作

当IP地址中的路由发生变化，或者routerLink被点击。路由器会把路由对应的组件加载到上级组件的出口下面。

二 关于起始页---index.html

ip+port+router---构成了完整的地址

base+path---构成完整的路由

index.html里面只有<app-root></app-root>(根组件)才能使变量

所以index.html以及嵌套的app-root不受路由的支配，而且app-root是根路由的所在地

三 路由的激活状态

1.当前ip地址里面的路由，所以只有改路由对应的组件，才能使用activatedRoute对象

2.精准的路由链接

    <div [routerLink]="['t']" routerLinkActive='wordColor fontSize' 
        [routerLinkActiveOptions]='{exact:true}'
      >
        father
    </div>
    <div [routerLink]="['t/t1']" routerLinkActive='wordColor fontSize'>
        child
    </div>

四 路由事件

1.最简单的处理方式

虽然router.events是subject，可以直接把它当成一个observable,取出其中的event

import {Router,NavigationStart,NavigationEnd} from '@angular/router'

 ngOnInit() {
    this.router.events.subscribe(e=>{
      if(e instanceof NavigationStart){
        console.log('navigationStart')
      }
      if(e instanceof NavigationEnd){
        console.log('navigationEnd')
      }
    })
  }

五 添加路由模块

ng g m app-routing --module app --flat

--module app 把app-routing模块导入到app模块中

--flat 不创建文件夹

六 可选参数

1.设置可选参数

this.router.navigate(['/t',{id:0}])
routerLink="['/t',{id:0}]"

2.提取可选参数

//1.snapshot
//2.observable--当自己向自己跳转时,可以获取最新的参数
this.activatedRoute.paramMap.subscribe(x=>x.get('id'))

3.当自己向自己跳转时(无论是在自己的组件内，还是其他的组件内)

this.router.navigate(['/crisis',{id:this.id++}])

组件都不会重新加载,onInit不会再次执行，所以snapshot获取的参数

不会变,而observable里面的回调函数会再次执行

4.当必选参数和可选参数重名时---get出来的是可选参数

//设置参数
<a [routerLink]="['/heroDetail',hero.id,{id:10}]">{{hero.name}}</a>
//提取参数
let info=this.activatedRoute
info.paramMap.subscribe(x=>{
    console.log(x.get('id'))//10
})

七 必选参数

当自己向自己跳转时,组件不会重新加载

this.router.navigate([`/heroDetail/${this.id++}`)

八 获取上一页的url

document.referrer