我是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组件。但是,它以相反的顺序呈现。
如何让它们以正确的顺序渲染?