Angular 2.x折騰記 ：(4)初步瞭解路由及使用

前言

路由這塊的水挺深，我這裏扯扯我用過的一些特性及一丟丟的經驗

概念性的東西

言簡意賅的總結一下：

路由就是控制視圖與視圖之間的跳轉，之間還能夠傳遞參數什麼的,路由的退後及前進不會完整的請求整個頁面，還能夠徹底不請求(在生命週期裏面控制);

• angular 2 + 裏面有兩種url風格

• 一個是常規咱們訪問url那種protocol://domain/path/f/fds

• 一種的hash(#)風格，protocol://domain/#/account/login

• 能夠操控路由了，那必然就能夠作鑑權了。。。

• 路由相關的指令或者術語

  • <router-outlet> :路由佔位符，能夠理解爲渲染路由組件的區域，一個組件只能一個無命名<router-outlet>，命名的能夠多個
  • ng-content: 能夠嵌套一個組件的內容在另一個組件中！！很經常使用！
  • RouterLink：可讓一個元素具備跳轉功能，裏面有不少使用的參數[指令]，我大致解釋下經常使用的哈
    • queryParams ： 能夠傳遞參數的,跳轉過去就是這種/security-alert?AlertType=50,能夠接受對象
    • skipLocationChange : 內容跳轉，路由保持不變，換句話說，就是停留在上個頁面的url而不是新的url -- 經常使用！
    • fragment：代碼片斷拼接到url，只接受字符串,在url就是hash拼接；/security-alert#1232
  • ActivatedRoute: 當前活動的路由，很是經常使用，邏輯處理的時候常常用到，參數比上面多，大同小異
  • ActivatedRouteSnapshot:這個是上面的局部實現，路由鏡像，用來獲取一些路由的信息很方便，單獨用上面的也能夠拿到相關的路由信息
  • Router這個內置組件，是路由最重要的東東了，相對路由這些，絕對路徑這些均可以實現，我這裏也說說經常使用的
  • url: 獲取url
  • routerState: 路由狀態
  • navigateByUrl：絕對路徑的跳轉,有個可選參數[{relativeTo, queryParams, fragment, preserveQueryParams, queryParamsHandling,}?: NavigationExtras]，可選參數就是上面那個停留在當前路徑跳轉這些
  • parseUrl：格式化url，實用！
  • navigate :配合可選參數能夠實現當前路勁下的相對跳轉，帶參數跨頁面跳轉等

常規路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// 頁面組件
import { NameComponent } from './name.component';

const routes: Routes = [
  { 
    path: 'path', // path是路由訪問的路徑
    component: NameComponent, //component是映射的組件
    children:[ // children是嵌套組件的包含層
        {
            path:'', //留空可讓路徑默認指向第一個組件，訪問時候沒有帶任何子路徑狀況下
            component:'ffff' // 對應的組件記得先提早引入
        }，
        {
            path:'edit/:id', // 這樣是表明子組件須要帶一個參數才能進入
            component:'ggg' // 對應的組件記得先提早引入
        }
    ]
  } 
  
];

@NgModule({
  // 注入到模塊中，forChild只能用於子模塊，forRoot只能用於跟模塊
  // forRoot有一個可選的配置參數，裏面有四個選項
  // enableTracing ：在console.log中打印出路由內部事件信息
  // useHash ：把url改爲hash風格，protocol://domain/#/account/login
  // initialNavigation ： 禁用初始導航，沒用過。。
  // errorHandler ：使用自定義的錯誤處理，來拋出報錯信息；
  imports: [RouterModule.forChild|Root(routes)], 
  
  // exports是導出組件，通常用於自定義組件或者模塊。。
  exports: [RouterModule],
})

複製代碼

懶加載

import { ModuleWithProviders } from '@angular/core';

// 路由相關模塊
import { Routes, RouterModule } from '@angular/router';

// 佈局
import { MitLayoutComponent } from './widgets/mit-layout/mit-layout.component';

// 鑑權服務
import { RbacService } from './rbac/rbac.service';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/page/dashboard/vehicle-overview',
    pathMatch: 'full', // 匹配全局，默認是'prefix','full'是全局匹配/
    canActivate: [RbacService] // canActivate是內置攔截器，RbacService是鑑權服務
  },
  {
    path: 'page',
    component: MitLayoutComponent,
    canActivate: [RbacService],
    children: [ // 懶加載在目前的版本都必須用絕對路徑指向對應的模塊,dashboard.module是文件名，#DashboardModule是裏面處處的模塊，必須緊跟才能正確識別
      { path: 'base-data', loadChildren: 'app/modules/base-data/base-data.module#BaseDataModule' }, // 基礎數據
  },
  {  // 帳號相關
    path: 'account',
    loadChildren: 'app/modules/account/account.module#AccountModule',
  },
  {
    path: 'event',
    loadChildren: 'app/modules/mobile-alarm/mobile-alarm.module#MobileAlarmModule' // 安全警報移動端處理
  },
  { path: 'error', loadChildren: 'app/modules/error/error.module#ErrorModule' }, // 錯誤
  { path: 'not-found', redirectTo: 'error/404' }, // 404 
  { path: '**', redirectTo: 'error/404' } // 錯誤 ， 沒有匹配到任何路徑的都跳轉到404

];

// ModuleWithProviders 是個接口，就是容許ngModule和providers類型
export const AppRoutes: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });


// 上面這種寫法只是把路由處處到一個變量，也就是要生效必須到相應的模塊中引入(NgModule)中import進去

複製代碼

小技巧

獲取url的id

// 根據是否存在id判斷是新增仍是修改
  checkAction() {
    // 用activatedRoute來獲取url上對應的參數
    this.activatedRoute.params.subscribe((params: { id: number }) => {
      if (params.id) {
        this.id = params.id;
      } else {
        this.showLoading = false;
      }
    });
  }
  
  
  // 這種是直接獲取queryParam
  this.activatedRoute.queryParams.subscribe(
      (res: { AlertType: string }) => {
        console.log(res);
      },
      (err):never => {
        console.log('我靠，網絡錯誤');
      }
    );
複製代碼

返回上個頁面

// 取消
  back() {
    // 這裏判斷id，url進來的帶了一個關聯id，好比你要查看一個用戶的詳細信息，根據id關聯
    // 在這個頁面獲取到這個id，而後進行的路由的相對跳轉
    if (this.id) {
      this.router.navigate(['../../'], { relativeTo: this.activatedRoute });
    } else {
      this.router.navigate(['../'], { relativeTo: this.activatedRoute });
    }
  }
複製代碼

總結

有不對之處請留言，會及時跟進修正，謝謝閱讀