Angular 2 配置路由器出口

示例

现在已经配置了路由器，并且我们的应用程序知道如何处理路由，我们需要显示配置的实际组件。

为此，请为顶级（应用）组件配置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>under元素，以便仅页面的某些部分发生变化。