序言
在 Angular 5.X 中，有一個特別的標簽： <router-outlet> ， 其實，同樣的，甚至同名的標簽，在 React 中也有。 可見 Angular 與 React 的相似性有多高！
在 app.module.ts 路由文件中，有這么一段代碼：
imports: [ BrowserModule, RouterModule.forRoot( [ { path: '', redirectTo:'/home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'dashboard', component: DashboardComponent } ] ) ],
這段代碼，意在配置路由， 根據不同的 URL， 跳轉到不同的頁面。 注意： 這是單頁面應用（SPA），只是局部的內容變化，不需要整個頁面跳轉。 不會出現加載的進度條。
講述了路由配置文件，再來看頁面：
index.html 是整個APP的頁面入口。 代碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>HelloWorld</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
關鍵的一行代碼是：
<app-root></app-root>
這里 <app-root> 相當於是局部頁面的占位符。 這個區域是動態加載的，運行時，會被 app.component.html 替換掉。具體來說，就是被以下頁面替換掉。
app.component.html 文件代碼如下：
<div style="text-align:center">
<h1>
{{title}}!!
</h1>
<nav>
<a routerLink="home" routerLinkActive="active">Home</a>
<a routerLink="about">About</a>
<a routerLink="dashboard">Dashboard</a>
</nav>
<router-outlet></router-outlet>
</div>
代碼解讀： 關鍵的代碼是：
<router-outlet></router-outlet>
可以簡單把它理解為： 頁面的占位符，動態加載，會被替換掉的。
當點擊 home、about、 dashboard 時， 在導航欄的下方，會被對應的 XX.component.html 替換掉。 這就是單頁面路由的原理。
深度理解 <router-outlet>
Routers 參數是一個有路由定義組成的一個數組。路由定義分如下兩部分：
Path：這個是用來匹配瀏覽器地址中的URL。
Component：路由對應的組件。
讓路由可用
引入 RouterModule，即把 RouterModule 添加到 AppModule 的imports 數組中。
import { RouterModule } from '@angular/router';
<router-outlet>
如果沒有 <router-outlet>， 又會怎樣呢？
如果在瀏覽器的地址欄中添加 /about ，比如： http://localhost:4200/about
路由本應該會匹配地址，並顯示 AboutComponent 。然而事實並非如此。我們需要告訴路由要在哪里顯示這個AboutComponent組件。為了實現這個，需要在 about.component.html 的最后添加 <router-outlet> 元素，<router-outlet> 是 RouterModule 中的其中一個指令。
當然，在實際應用中，我們不會手動在地址欄中輸入/about的， 而是通過 <a> 標簽來實現。
<nav>
<a routerLink="home" routerLinkActive="active">Home</a>
<a routerLink="about">About</a>
<a routerLink="dashboard">Dashboard</a>
</nav>
再來看個例子
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">
<a routerLink="create" routerLinkActive="active">
Add coins
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
<router-outlet></router-outlet> 到底是怎么占位的呢？
當點擊 Add coins 這個 <a> 標簽時，會激活 <router-outlet>
<a routerLink="create" routerLinkActive="active">
Add coins
</a>
這個時候， 以下的 div 區域會被替換：
<div class="container"> <router-outlet></router-outlet> </div>
這就是說， 如果想在哪個區域顯示 create.component.html 這個子網頁，只需要添加 <router-outlet> 就可以了。