Angular 2中的路由器出口和页脚

时间:2017-02-21 06:28:27

标签: angular

我是Angular的新手。我正在创建一个包含两个部分的应用程序。第一部分将根据路线加载。第二秒将是一个页脚,在所有视图中都是相同的。

的index.html

<body>
<app-root>Loading...</app-root>
</body>

应用-routing.module.ts

{ path: '',  component: HomeComponent }

app.component.ts

import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
}

app.component.html

 <router-outlet><router-outlet>
 <app-footer></app-footer>

从'@ angular / core'导入{Component};

home.component.ts

@Component({
selector: 'app-home',
templateUrl: './home.component.html'
})
export class HomeComponent { }

home.component.html

<div>
<p>Home page will come here</p>
</div>

footer.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-footer',
templateUrl: './footer.component.html'
})

export class FooterComponent {}

footer.component.html

<p>Footer will come here</p>

屏幕显示

页脚将来到这里

主页将来到这里

我希望路由器插座首先渲染HomeComponent。然后,应该加载app-footer组件。但是,它以相反的顺序呈现。

如何让它们以正确的顺序渲染?

1 个答案:

答案 0 :(得分:0)

您可以在https://github.com/g7bhatia/stackexample仅查看此应用文件夹内容,并按预期进行打印。