基礎(chǔ)知識(shí)
1.<base href>
大多數(shù)帶路由的應(yīng)用都要在 index.html 的 <head>標(biāo)簽下添加一個(gè) <base>元素皿桑。
2.導(dǎo)入路由庫
import { ROUTER_DIRECTIVES } from '@angular/router';
3.配置
首選方案是用帶“路由數(shù)組”的provideRouter工廠函數(shù)（[provideRouter(routes)]）來啟動(dòng)此應(yīng)用占贫。
app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';
const routes: RouterConfig = [
{ path: 'crisis-center', component: CrisisCenterComponent },
{ path: 'heroes', component: HeroListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{ path: '**', component: PageNotFoundComponent }
];
export const appRouterProviders = [
provideRouter(routes)
];
RouterConfig是一個(gè)路由數(shù)組愧驱，它決定如何導(dǎo)航。每個(gè)Route會(huì)把一個(gè) URL 的path映射到一個(gè)組件掌逛。
path不能使用斜杠/開頭痴施。路由器會(huì)為我們解析和生成URL味榛。第三個(gè)路由中的
id是一個(gè)路由參數(shù)的 token静盅。第四個(gè)路由中的
**代表路由是一個(gè)通配符路徑。如果當(dāng)前無法匹配上我們配置過的任何一個(gè)路徑寝殴，路由器就會(huì)匹配上這一個(gè)蒿叠，類似于switch中的default。當(dāng)需要顯示 404 頁面蚣常，該特性非常有用市咽。我們將配置好的
routes數(shù)組傳給provideRouter（）函數(shù)，這個(gè)函數(shù)返回一個(gè)經(jīng)過配置的 Router服務(wù)提供商最后通過
appRouterProviders數(shù)組導(dǎo)出這個(gè)提供商抵蚊，以便在main.ts中簡單的注冊(cè)路由器依賴施绎。
在 main.ts中的bootstrap函數(shù)中注冊(cè)路由器的提供商。
main.ts
// main entry point
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { appRouterProviders } from './app.routes';
bootstrap(AppComponent, [
appRouterProviders
])
.catch(err => console.error(err));
4.<router-outlet>
上面的配置完成后贞绳，當(dāng) URL 變?yōu)?/heroes時(shí)谷醉，路由器就會(huì)匹配到path為heroes的Route，并且在宿主視圖中的<router-outlet>中顯示HeroListComponent組件冈闭。
5.[routerLink]
我們?cè)?code><a>標(biāo)簽中添加了routerLink指令俱尼，可以一次性綁定到我們路由中的path值。
如果routerLink想要綁定動(dòng)態(tài)信息萎攒，我們就可以把它綁定到一個(gè)能夠返回路由鏈接數(shù)組的模板表達(dá)式上遇八。路由器最終會(huì)把此數(shù)組解析成一個(gè) URL 和一個(gè)組件視圖。
我們還可以往<a>中添加一個(gè)routerLinkActive指令耍休，用于在相關(guān)的routerLink被激活時(shí)所在元素添加或移除CSS類刃永。該指令可以直接添加到該元素上，也可以直接添加到其父元素上羊精。
AppComponent模板
template: `
<h1>Component Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
6.路由器狀態(tài)
在每個(gè)導(dǎo)航的生命周期完成時(shí)斯够，路由器會(huì)構(gòu)建出一個(gè) ActivatedRoute組成的樹，它表示路由器的當(dāng)前狀態(tài)园匹。我們可以在應(yīng)用中任何使用 Router服務(wù)及其 routerState屬性來訪問當(dāng)前的RouterState值雳刺。
7.ROUTER_DIRECTIVES
RouterLink、RouterLinkActive和RouterOutlet是ROUTER_DIRECTIVES集合中的指令裸违，所以需要在@Component元數(shù)據(jù)中加入到directives數(shù)組中掖桦。
directives: [ROUTER_DIRECTIVES]
喜歡這篇文章請(qǐng)點(diǎn)贊或收藏，如果想看到我的更多的文章供汛，請(qǐng)關(guān)注我Ｇ雇簟Ｓ磕隆！
