首页 文章

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

提问于
浏览
-1

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

index.html

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

app-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'导入;

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>

The screen displays this

页脚会来这里

主页将来到这里


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

我该怎么做才能使它们以正确的顺序渲染?

1 回答

相关问题