Angular 路由⑦要素

 

cnzt      

 

http://www.cnblogs.com/zt-blog/p/7919185.html

http://www.cnblogs.com/zt-blog/p/7919185.html

 

 

路由⑦要素：

 

1. 聲明 <base herf='' />

    以便於路由知道怎麼拼接路由path

 

2. 引入angular的路由模塊 RouterModule 

   RouterModule  -- 路由模塊

   Router -- 路由器

   Route --  路由配置信息， { path: 'crisis-center', component: CrisisListComponent }

   Routes --  是一個Route數組

 

3.1 配置路由信息, appRoutes描述如何進行導航。

　const appRoutes: Routes = [

　　{ path: 'crisis-center', component: CrisisListComponent },    // 這是一個Route

　　{ path: 'hero/:id', component: HeroDetailComponent },  //帶參數id的路由， e.g. 'hero/18'

　　 { path: 'heroes', component: HeroListComponent, data: { title: 'Heroes List' } },   //存放路由有關的任何信息（靜態只讀數據），可被任意激活路由訪問。

　　{ path: '', redirectTo: '/heroes', pathMatch: 'full' },     //重定向。pathMatch指定路徑匹配規則，full表示剩下的url必須徹底匹配path值，prefix表示剩下的url只要以path值開頭便可。

　　{ path: '**', component: PageNotFoundComponent }  ];   //**路徑是一個通配符,前面都不匹配時選此選項。

 

　　路由匹配順序由上至下，按照定義路由的順序匹配的。

       應用龐大時，會專門分出路由模塊，多個路由模塊引入順序要注意，每一個路由模塊也是按照導入的前後順序插入本身定義的路由。定義了通配符的路由模塊必定要放到最後！

---

 

　　Question1： 如何在運行時查看路由器配置？

　　Answer1：預加載技術異步加載模塊

 

　　

　　Question2： 傳參的幾種方式？

 

　　Answer2：

　　1. 路由定義時帶參數，  { path: 'hero/:id', component: HeroDetailComponent }

　　2. 導航時， 組件中定義：  [RouterLink] = ['/hero', hero.id] // { 15 }  路由器會將這個數組組合成url 'hero/15'

　　　　注意： 定義路由參數時，若是像這樣： this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]); 那麼最終瀏覽器看到的url會像 XXX/heroes;id=15;foo=foo 這樣，分號日後並不屬於url的一部分，它們僅僅是做爲查詢參數存在而已！

　　3. 接參時，經過ActivatedRoute獲取：

　　　3.1 導入ActivatedRoute, ParamMap，， 並在構造函數中注入這些服務；

　　    3.2 this.activatedRoute.paramMap 返回全部參數，他是一個可觀察對象: 用可觀察對象方式獲取參數有利於（用不一樣的參數連續導航到相同組件時）組件的複用！

　　　3.3 paramMap 有四個方法： has(key); get(key); getAll(key); keys();

　　

3.2 配置路由器

　　@NgModule({

　　    imports: [

　　　　RouterModule.forRoot( appRoutes,

　　　　　　{ enableTracing: true } // <-- debugging purposes only //開啓此選項後，路由事件會打印到控制檯中

　　　　)

　　　　 // other imports here

　　   ] , ......

　　})

 

　　根模塊的路由用forRoot，子模塊的路由用forChild

 

4. 路由出口----宿主視圖

　　<router-outlet></router-outlet>  ： 路由控制的視圖會根據path顯示在這裏。

　　　　注意： 能夠有多個路由出口，可是無名出口最多隻能有一個！！！

 

　　擴展：

　　1. 命名出口的路由定義方式以下。path 和 component 以外，還指定了 outlet t出口，表示這個路由會顯示在名爲 popup 的 router-outlet 中。

　　{

　　　　path: 'compose',

　　　　component: ComposeMessageComponent,

　　　　outlet:  'popup'

　　}, ......

　　2. 向命名路由會出口添加內容：   <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>  // 須要在連接參數數組中指定這個命名出口

　　　　　　注意： outlets 的屬性對象中，也能夠指定多個出口，這裏只有一個popup。

　　　瀏覽器的url會像這樣：   "XXX/superheroes(popup:compose)"

　　3. 清空命名路由會出口：     this.router.navigate([ { outlets: { popup: null } }]);   //1. 將名爲popup 的 router-outlet 內容清空。2.將url中的(popup:compose)移除。

 

5. 觸發路由導航

 5.1 經過a標籤/button標籤 等可點擊的標籤觸發：

　　<a routerLink="/tabA" routerLinkActive="active">Tab A</a>

 

　　routerLink -- 指定路徑

　　routerLinkActive -- 當前Tab選中時會被加上active class

 

5.2 經過代碼觸發：

　　Router.navigate( [ 連接參數數組 ] ) 

　　連接參數也能夠用相對路徑，如： this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });

　　　　這裏使用了相對路徑 '../' , 來返回上一級路由父路由。使用相對路徑時必須指定當前的ActivatedRoute對象（例子中的 this.route）來提供參考！！！

 

6. 路由樹 -- 路由狀態

  路由樹 ---- 是一個由ActivatedRoute （一個路由服務）組成的樹。

  Router服務的屬性routerState能夠訪問當前的RouterState的值。能夠由此遍歷整個路由樹！

 

7. 路由事件  

  在一次導航中，Router經過Router.events發佈一系列從導航開始到結束的導航事件。

  

NavigationStart	本事件會在導航開始時觸發。
RoutesRecognized	本事件會在路由器解析完URL，並識別出了相應的路由時觸發
RouteConfigLoadStart	本事件會在Router對一個路由配置進行惰性加載以前觸發。
RouteConfigLoadEnd	本事件會在路由被惰性加載以後觸發。
NavigationEnd	本事件會在導航成功結束以後觸發。
NavigationCancel	本事件會在導航被取消以後觸發。 這多是由於在導航期間某個路由守衛返回了false。
NavigationError	這個事件會在導航因爲意料以外的錯誤而失敗時觸發。

 

 路由守衛：

　　 路由守衛經過返回一個boolean值來控制路由器的行爲。

　　由於守衛的動做多是異步的（詢問用戶，server取數據等），因此守衛能夠返回Promise或者Observable對象。

 

　　守衛接口：

• • 　　用CanActivate來處理導航到某路由的狀況。

  • 　　用CanActivateChild來處理導航到某子路由的狀況。

  • 　　用CanDeactivate來處理從當前路由離開的狀況.

  • 　　用Resolve在路由激活以前獲取路由數據。

  • 　　用CanLoad來處理異步導航到某特性模塊的狀況。

 

　　守衛以服務的方式定義，並注入到路由配置中。

　　

 

 

---

 

 一些概念：

 

  RouterPutlet -- 路由出口

  RouterLink -- 路由鏈接，值是 字符串 或 連接參數數組

  RouterLinkActive -- RouterLink的連接被激活時會被加上此屬性指定的 classes，反之移除

 

  ActivatedRoute -- 激活的路由

  RouterState -- 能夠遍歷路由樹

 

  路由組件 -- 帶有router-outlet的組件