angular路由学习

最近比较忙，抽空看了angular官网上的路由与导航，其实仍是有不少想了解的地方，惋惜目前没有时间一一验证学习，只能之后有空再说了，在这里只是记录一下学习是遇到的混淆的点。

路由配置(Route) 路由器(Router) 激活路由(ActivatedRoute) 路由状态(RouterState)

先给出一份路由模块配置:

const routers: Routes = [
  {
    path: '', children: [
      {
        path: '', component: MainComponent, children: [
          {path: 'son', component: SonComponent}
        ]
      },
      {path: 'modal', component: ModalComponent}
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

在这里routers变量的类型是Routers,其实就是一个Route数组:

因此Route的意思就显而易见了，就是一个简单的路由配置

Router路由器(我看的时候总是和Route看混),提供导航和操纵 URL 的能力。

ActivatedRoute包含与当前组件相关的路由信息,能够从上面获取参数，url，父子路由信息等。

路由状态RouterState,咱们都知道路由为一个树，由咱们配置的路由信息构建而成，而RouteState就表明当前路由的这棵树，能够经过RouteState获取当前的路由树。参考连接
这是我按照上边的 路由配置打印的结果，能够看到RouteState最主要的为一个Root属性，类型是ActivatedRoute,通常为AppComponent,而在他的Children属性下一步步能够看到咱们的MainCoponemt和SonComponent,我浏览器路由为http://localhost:4200/son;这说明当前MainComponet和SonComponent,AppComponent都是被路由激活的组件,他们都记录在RouteState这个当前的路由状态上。

路由快照(Snapshot)

在ActivatedRoute,RouteState等路由信息中，都有一个带有XXXSnapshot字段的属性，这个为快照，也就是当前瞬间的路由信息。

默认状况下，若是没有访问过其它组件就导航到了同一个组件实例，那么路由器倾向于复用组件实例。若是复用的话，路由的参数能够变化，这也是ActivatedRoute里的参数须要订阅的缘由，而快照则是保存每一次路由的信息。
例如咱们修改上边son路由，接受一个id参数,一个方法跳转，一个方法显示快照参数:

<p>
  id:{{id}}
</p>
<button (click)="show()">显示id</button>
<button (click)="go()">跳转</button>

id: number;

  constructor(private active: ActivatedRoute, private router: Router) {
  }

  ngOnInit() {
    this.id = +this.active.snapshot.paramMap.get('id');
    console.log('建立');
  }

  show() {
    this.id = +this.active.snapshot.paramMap.get('id');
  }


  go() {
    const id = this.id + 1;
    this.router.navigateByUrl('/son/' + 10);
  }

输入网址http://localhost:4200/son/9,能够看到id显示9，而且控制台打印了‘建立’:

点击跳转，路由 变为http://localhost:4200/son/10,而页面却没有变化，也没有再打印，说明组件进行了复用

点击显示id,能够看到id变成了10,

这说明虽然路由复用了，可是路由快照却又是从新的一份，这在仅须要路由瞬时信息即为有效，在路由处理器中一般都是用的路由快照。

总结

其实感受还有不少想学习的地方，但无奈时间匆忙，因此只能之后再慢慢探究了。