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,

這說明雖然路由複用了，可是路由快照卻又是從新的一份，這在僅須要路由瞬時信息即爲有效，在路由處理器中一般都是用的路由快照。

總結

其實感受還有不少想學習的地方，但無奈時間匆忙，因此只能之後再慢慢探究了。