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

2022-07-04 10:10 更新

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

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

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

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

目標(biāo)

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

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

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

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

    當(dāng)提示 ?Would you like to add Angular routing?? 時(shí),選擇 ?Y?。

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

    片刻之后,一個(gè)新項(xiàng)目 ?angular-custom-route-match? 就準(zhǔn)備好了。

  3. 打開終端窗口,進(jìn)到 ?angular-custom-route-match? 目錄。
  4. 創(chuàng)建一個(gè)組件 profile。
  5. ng generate component profile
  6. 在你的代碼編輯器中,找到文件 ?profile.component.html? 并將其占位內(nèi)容替換為以下 HTML。
  7. <p>
    Hello {{ username$ | async }}!
    </p>
  8. 在你的代碼編輯器中,找到文件 ?app.component.html? 并將其占位內(nèi)容替換為以下 HTML。
  9. <h2>Routing with Custom Matching</h2>
    
    Navigate to <a routerLink="/@Angular">my profile</a>
    
    <router-outlet></router-outlet>

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

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

  1. 在你的代碼編輯器中,打開 ?app.module.ts? 文件。
  2. 為 Angular 的 ?RouterModule ?和 ?UrlMatcher ?添加 ?import ?語句。
  3. import { RouterModule, UrlSegment } from '@angular/router';
  4. 在 ?imports ?數(shù)組中,添加 ?RouterModule.forRoot([])? 語句。
  5. @NgModule({
      imports:      [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot([
          {
    /* . . . */
        ])],
      declarations: [ AppComponent, ProfileComponent ],
      bootstrap:    [ AppComponent ]
    })
  6. 將如下代碼添加到 ?RouterModule.forRoot()? 語句中,以便使用自定義路由匹配器。
  7. 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
    }

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

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

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

訂閱路由參數(shù)

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

  1. 在你的代碼編輯器中,打開 ?profile.component.ts? 文件。
  2. 為 Angular 的 ?ActivatedRoute ?和 ?ParamMap ?添加 ?import ?語句。
  3. import { ActivatedRoute, ParamMap } from '@angular/router';
  4. 為 RxJS 的 ?map ?添加 ?import ?語句。
  5. import { map } from 'rxjs/operators';
  6. 訂閱 ?username ?路由參數(shù)。
  7. username$ = this.route.paramMap
      .pipe(
        map((params: ParamMap) => params.get('username'))
      );
  8. 將 ?ActivatedRoute ?注入到組件的構(gòu)造函數(shù)中。
  9. constructor(private route: ActivatedRoute) { }

測試你的自定義 URL 匹配器

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

  1. 在終端窗口中,運(yùn)行 ?ng serve? 命令。
  2. ng serve
  3. 打開瀏覽器訪問 ?http://localhost:4200?。
  4. 你會(huì)看到一個(gè)網(wǎng)頁,其中包含一個(gè)句子,內(nèi)容為 ?Navigate to my profile?。

  5. 單擊 my profile 超鏈接。
  6. 一個(gè)新的句子 ?Hello, Angular!? 出現(xiàn)在頁面上。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號