教程：創(chuàng)建自定義路由匹配器

Angular Router 支持強大的匹配策略，你可以使用它來幫助用戶在應(yīng)用中導航。該匹配策略支持靜態(tài)路由、帶參數(shù)的可變路由、通配符路由等。此外，還可以為更復雜的 URL 構(gòu)建你自己的自定義模式匹配。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、做網(wǎng)站、寧波網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、寧波網(wǎng)絡(luò)營銷、寧波企業(yè)策劃、寧波品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供寧波建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

在本教程中，你將使用 Angular 的 ?UrlMatcher ?來構(gòu)建自定義路由匹配器。此匹配器在 URL 中查找 Twitter ID。

有關(guān)本教程最終版本的工作示例，請參閱現(xiàn)場演練 / 下載范例。

目標

實現(xiàn) Angular 的 ?UrlMatcher ?以創(chuàng)建自定義路由匹配器。

創(chuàng)建一個范例應(yīng)用

使用 Angular CLI，創(chuàng)建一個新應(yīng)用程序 angular-custom-route-match。除了默認的 Angular 應(yīng)用程序框架之外，還將創(chuàng)建一個 profile 組件。

1. 創(chuàng)建一個新的 Angular 項目 angular-custom-route-match。

ng new angular-custom-route-match

當提示 ?Would you like to add Angular routing?? 時，選擇 ?Y?。

當系統(tǒng)提示 ?Which stylesheet format would you like to use?? 時，選擇 ?CSS?。

片刻之后，一個新項目 ?angular-custom-route-match? 就準備好了。

2. 打開終端窗口，進到 ?angular-custom-route-match? 目錄。
3. 創(chuàng)建一個組件 profile。

ng generate component profile

4. 在你的代碼編輯器中，找到文件 ?profile.component.html? 并將其占位內(nèi)容替換為以下 HTML。

Hello {{ username$ | async }}!

5. 在你的代碼編輯器中，找到文件 ?app.component.html? 并將其占位內(nèi)容替換為以下 HTML。

Routing with Custom Matching

Navigate to my profile

為你的應(yīng)用程序配置路由

應(yīng)用程序框架就緒后，接下來就要向 ?app.module.ts? 文件中添加路由能力。首先，你要創(chuàng)建一個自定義 URL 匹配器，用于在 URL 中查找 Twitter ID。此 ID 由其前導 ?@? 符號標識出來。

1. 在你的代碼編輯器中，打開 ?app.module.ts? 文件。
2. 為 Angular 的 ?RouterModule ?和 ?UrlMatcher ?添加 ?import ?語句。

import { RouterModule, UrlSegment } from '@angular/router';

3. 在 ?imports ?數(shù)組中，添加 ?RouterModule.forRoot([])? 語句。

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
/* . . . */
    ])],
  declarations: [ AppComponent, ProfileComponent ],
  bootstrap:    [ AppComponent ]
})

4. 將如下代碼添加到 ?RouterModule.forRoot()? 語句中，以便使用自定義路由匹配器。

matcher: (url) => {
    if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
      return {
        consumed: url,
        posParams: {
          username: new UrlSegment(url[0].path.slice(1), {})
        }
      };
    }

    return null;
  },
  component: ProfileComponent
}

這個自定義匹配器是一個執(zhí)行以下任務(wù)的函數(shù)：

• 匹配器驗證數(shù)組是否只包含一個區(qū)段。
• 匹配器使用正則表達式來確保用戶名的格式是匹配的。
• 如果匹配，則該函數(shù)返回整個 URL，將路由參數(shù) ?username ?定義為路徑的子字符串。
• 如果不匹配，則該函數(shù)返回 ?null ?并且路由器繼續(xù)查找與 URL 匹配的其他路由。

自定義 URL 匹配器的行為與任何其他路由定義方式是一樣的。請像定義任何其他路由一樣定義子路由或惰性加載路由。

訂閱路由參數(shù)

自定義匹配器就位后，你現(xiàn)在需要訂閱 ?profile ?組件中的路由參數(shù)。

1. 在你的代碼編輯器中，打開 ?profile.component.ts? 文件。
2. 為 Angular 的 ?ActivatedRoute ?和 ?ParamMap ?添加 ?import ?語句。

import { ActivatedRoute, ParamMap } from '@angular/router';

3. 為 RxJS 的 ?map ?添加 ?import ?語句。

import { map } from 'rxjs/operators';

4. 訂閱 ?username ?路由參數(shù)。

username$ = this.route.paramMap
  .pipe(
    map((params: ParamMap) => params.get('username'))
  );

5. 將 ?ActivatedRoute ?注入到組件的構(gòu)造函數(shù)中。

constructor(private route: ActivatedRoute) { }

測試你的自定義 URL 匹配器

代碼就緒后，就可以測試自定義 URL 匹配器了。

1. 在終端窗口中，運行 ?ng serve? 命令。

ng serve

2. 打開瀏覽器訪問 ?http://localhost:4200?。

你會看到一個網(wǎng)頁，其中包含一個句子，內(nèi)容為 ?Navigate to my profile?。

3. 單擊 my profile 超鏈接。

一個新的句子 ?Hello, Angular!? 出現(xiàn)在頁面上。

本文名稱：創(chuàng)新互聯(lián)Angular教程：Angular教程：創(chuàng)建自定義路由匹配器
文章URL：http://uogjgqi.cn/article/djoioec.html