建站
咨詢
售后
建站咨詢
新聞中心
教程：創(chuàng)建自定義路由匹配器
Angular Router 支持強(qiáng)大的匹配策略，你可以使用它來(lái)幫助用戶在應(yīng)用中導(dǎo)航。該匹配策略支持靜態(tài)路由、帶參數(shù)的可變路由、通配符路由等。此外，還可以為更復(fù)雜的 URL 構(gòu)建你自己的自定義模式匹配。
創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、做網(wǎng)站、寧波網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開發(fā)、寧波網(wǎng)絡(luò)營(yíng)銷、寧波企業(yè)策劃、寧波品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供寧波建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
在本教程中，你將使用 Angular 的 ?UrlMatcher ?來(lái)構(gòu)建自定義路由匹配器。此匹配器在 URL 中查找 Twitter ID。
有關(guān)本教程最終版本的工作示例，請(qǐng)參閱現(xiàn)場(chǎng)演練 / 下載范例。
目標(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 組件。
- 創(chuàng)建一個(gè)新的 Angular 項(xiàng)目 angular-custom-route-match。
- 打開終端窗口，進(jìn)到 ?
angular-custom-route-match? 目錄。 - 創(chuàng)建一個(gè)組件 profile。
- 在你的代碼編輯器中，找到文件 ?
profile.component.html? 并將其占位內(nèi)容替換為以下 HTML。 - 在你的代碼編輯器中，找到文件 ?
app.component.html? 并將其占位內(nèi)容替換為以下 HTML。
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)備好了。
ng generate component profile
Hello {{ username$ | async }}!
Routing with Custom Matching
Navigate to my profile
為你的應(yīng)用程序配置路由
應(yīng)用程序框架就緒后，接下來(lái)就要向 ?app.module.ts? 文件中添加路由能力。首先，你要?jiǎng)?chuàng)建一個(gè)自定義 URL 匹配器，用于在 URL 中查找 Twitter ID。此 ID 由其前導(dǎo) ?@? 符號(hào)標(biāo)識(shí)出來(lái)。
- 在你的代碼編輯器中，打開 ?
app.module.ts? 文件。 - 為 Angular 的 ?
RouterModule?和 ?UrlMatcher?添加 ?import?語(yǔ)句。 - 在 ?
imports?數(shù)組中，添加 ?RouterModule.forRoot([])? 語(yǔ)句。 - 將如下代碼添加到 ?
RouterModule.forRoot()? 語(yǔ)句中，以便使用自定義路由匹配器。
import { RouterModule, UrlSegment } from '@angular/router';@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
/* . . . */
])],
declarations: [ AppComponent, ProfileComponent ],
bootstrap: [ AppComponent ]
})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á)式來(lái)確保用戶名的格式是匹配的。
- 如果匹配，則該函數(shù)返回整個(gè) URL，將路由參數(shù) ?
username?定義為路徑的子字符串。 - 如果不匹配，則該函數(shù)返回 ?
null?并且路由器繼續(xù)查找與 URL 匹配的其他路由。
自定義 URL 匹配器的行為與任何其他路由定義方式是一樣的。請(qǐng)像定義任何其他路由一樣定義子路由或惰性加載路由。
訂閱路由參數(shù)
自定義匹配器就位后，你現(xiàn)在需要訂閱 ?profile ?組件中的路由參數(shù)。
- 在你的代碼編輯器中，打開 ?
profile.component.ts? 文件。 - 為 Angular 的 ?
ActivatedRoute?和 ?ParamMap?添加 ?import?語(yǔ)句。 - 為 RxJS 的 ?
map?添加 ?import?語(yǔ)句。 - 訂閱 ?
username?路由參數(shù)。 - 將 ?
ActivatedRoute?注入到組件的構(gòu)造函數(shù)中。
import { ActivatedRoute, ParamMap } from '@angular/router';import { map } from 'rxjs/operators';username$ = this.route.paramMap
.pipe(
map((params: ParamMap) => params.get('username'))
);constructor(private route: ActivatedRoute) { }測(cè)試你的自定義 URL 匹配器
代碼就緒后，就可以測(cè)試自定義 URL 匹配器了。
- 在終端窗口中，運(yùn)行 ?
ng serve? 命令。 - 打開瀏覽器訪問 ?
http://localhost:4200?。 - 單擊 my profile 超鏈接。
ng serve你會(huì)看到一個(gè)網(wǎng)頁(yè)，其中包含一個(gè)句子，內(nèi)容為 ?Navigate to my profile?。
一個(gè)新的句子 ?Hello, Angular!? 出現(xiàn)在頁(yè)面上。
名稱欄目：創(chuàng)新互聯(lián)Angular教程：Angular教程：創(chuàng)建自定義路由匹配器
路徑分享：http://www.dlmjj.cn/article/djoioec.html
