配置路由器插座
现在路由器已配置且我们的应用程序知道如何处理路由,我们需要显示我们配置的实际组件。
为此,请为你的顶级(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>
嵌套在元素下,以便只更改页面的某些部分。