W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
Angular Router 支持強(qiáng)大的匹配策略,你可以使用它來(lái)幫助用戶在應(yīng)用中導(dǎo)航。該匹配策略支持靜態(tài)路由、帶參數(shù)的可變路由、通配符路由等。此外,還可以為更復(fù)雜的 URL 構(gòu)建你自己的自定義模式匹配。
在本教程中,你將使用 Angular 的 ?UrlMatcher
?來(lái)構(gòu)建自定義路由匹配器。此匹配器在 URL 中查找 Twitter ID。
有關(guān)本教程最終版本的工作示例,請(qǐng)參閱現(xiàn)場(chǎng)演練 / 下載范例。
實(shí)現(xiàn) Angular 的 ?UrlMatcher
?以創(chuàng)建自定義路由匹配器。
使用 Angular CLI,創(chuàng)建一個(gè)新應(yīng)用程序 angular-custom-route-match。除了默認(rèn)的 Angular 應(yīng)用程序框架之外,還將創(chuàng)建一個(gè) profile 組件。
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)備好了。
angular-custom-route-match
? 目錄。ng generate component profile
profile.component.html
? 并將其占位內(nèi)容替換為以下 HTML。<p>
Hello {{ username$ | async }}!
</p>
app.component.html
? 并將其占位內(nèi)容替換為以下 HTML。<h2>Routing with Custom Matching</h2>
Navigate to <a routerLink="/@Angular">my profile</a>
<router-outlet></router-outlet>
應(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
? 文件。RouterModule
?和 ?UrlMatcher
?添加 ?import
?語(yǔ)句。import { RouterModule, UrlSegment } from '@angular/router';
imports
?數(shù)組中,添加 ?RouterModule.forRoot([])
? 語(yǔ)句。@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
/* . . . */
])],
declarations: [ AppComponent, ProfileComponent ],
bootstrap: [ AppComponent ]
})
RouterModule.forRoot()
? 語(yǔ)句中,以便使用自定義路由匹配器。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ù):
username
?定義為路徑的子字符串。null
?并且路由器繼續(xù)查找與 URL 匹配的其他路由。自定義 URL 匹配器的行為與任何其他路由定義方式是一樣的。請(qǐng)像定義任何其他路由一樣定義子路由或惰性加載路由。
自定義匹配器就位后,你現(xiàn)在需要訂閱 ?profile
?組件中的路由參數(shù)。
profile.component.ts
? 文件。ActivatedRoute
?和 ?ParamMap
?添加 ?import
?語(yǔ)句。import { ActivatedRoute, ParamMap } from '@angular/router';
map
?添加 ?import
?語(yǔ)句。import { map } from 'rxjs/operators';
username
?路由參數(shù)。username$ = this.route.paramMap
.pipe(
map((params: ParamMap) => params.get('username'))
);
ActivatedRoute
?注入到組件的構(gòu)造函數(shù)中。constructor(private route: ActivatedRoute) { }
代碼就緒后,就可以測(cè)試自定義 URL 匹配器了。
ng serve
? 命令。ng serve
http://localhost:4200
?。你會(huì)看到一個(gè)網(wǎng)頁(yè),其中包含一個(gè)句子,內(nèi)容為 ?Navigate to my profile
?。
一個(gè)新的句子 ?Hello, Angular!
? 出現(xiàn)在頁(yè)面上。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: