配置路由器插座

現在路由器已配置且我們的應用程式知道如何處理路由，我們需要顯示我們配置的實際元件。

為此，請為你的頂級（app） 元件配置 HTML 模板/檔案，如下所示：

//app.ts

import {Component} from '@angular/core';
import {Router, ROUTER_DIRECTIVES} from '@angular/router';

@Component({
    selector: 'app',
    templateUrl: 'app.html',
    styleUrls: ['app.css'],
    directives: [
        ROUTER_DIRECTIVES,
    ]
})
export class App {
    constructor() {
    }
}

<!-- app.html -->

<!-- All of your 'views' will go here -->
<router-outlet></router-outlet>

<router-outlet></router-outlet> 元素將切換給定路線的內容。關於這個元素的另一個好方面是它不必是 HTML 中唯一的元素。

例如：假設你希望每個頁面上的工具欄在路徑之間保持不變，類似於 Stack Overflow 的外觀。你可以將 <router-outlet> 巢狀在元素下，以便只更改頁面的某些部分。