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中的唯一元素。
例如:假设您希望每个页面上的工具栏在路线之间保持不变,类似于StackOverflow的外观。您可以嵌套<router-outlet>under元素,以便仅页面的某些部分发生变化。
热门推荐
10 病人祝福语老师寄语简短
11 新娘生孩子祝福语简短
12 婆婆66岁祝福语简短
13 今天孩子高考祝福语简短
14 送彩票生日祝福语简短
15 分别祝福语简短情话英文
16 画室揭牌仪式祝福语简短
17 女友妈妈生日祝福语简短
18 离别赠言离职祝福语简短