基礎知識
1.<base href>
大多數帶路由的應用都要在 index.html 的 <head>標簽下添加一個 <base>元素。
2.導入路由庫
import { ROUTER_DIRECTIVES } from '@angular/router';
3.配置
首選方案是用帶“路由數組”的provideRouter工廠函數（[provideRouter(routes)]）來啟動此應用。
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是一個路由數組，它決定如何導航。每個Route會把一個 URL 的path映射到一個組件。
path不能使用斜杠/開頭。路由器會為我們解析和生成URL。第三個路由中的
id是一個路由參數的 token。第四個路由中的
**代表路由是一個通配符路徑。如果當前無法匹配上我們配置過的任何一個路徑，路由器就會匹配上這一個，類似于switch中的default。當需要顯示 404 頁面，該特性非常有用。我們將配置好的
routes數組傳給provideRouter（）函數，這個函數返回一個經過配置的 Router服務提供商最后通過
appRouterProviders數組導出這個提供商，以便在main.ts中簡單的注冊路由器依賴。
在 main.ts中的bootstrap函數中注冊路由器的提供商。
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>
上面的配置完成后，當 URL 變為 /heroes時，路由器就會匹配到path為heroes的Route，并且在宿主視圖中的<router-outlet>中顯示HeroListComponent組件。
5.[routerLink]
我們在<a>標簽中添加了routerLink指令，可以一次性綁定到我們路由中的path值。
如果routerLink想要綁定動態信息，我們就可以把它綁定到一個能夠返回路由鏈接數組的模板表達式上。路由器最終會把此數組解析成一個 URL 和一個組件視圖。
我們還可以往<a>中添加一個routerLinkActive指令，用于在相關的routerLink被激活時所在元素添加或移除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.路由器狀態
在每個導航的生命周期完成時，路由器會構建出一個 ActivatedRoute組成的樹，它表示路由器的當前狀態。我們可以在應用中任何使用 Router服務及其 routerState屬性來訪問當前的RouterState值。
7.ROUTER_DIRECTIVES
RouterLink、RouterLinkActive和RouterOutlet是ROUTER_DIRECTIVES集合中的指令，所以需要在@Component元數據中加入到directives數組中。
directives: [ROUTER_DIRECTIVES]
喜歡這篇文章請點贊或收藏，如果想看到我的更多的文章，請關注我?。?！
