默认情况下，如何在角度2中显示常见的页眉和页脚? [英] How to display common header and footer by default in angular 2?
问题描述
我有通用的页眉组件和页脚组件.国家列表正在首页上加载.每当点击国家.页面将被重新加载并显示文本Loading...，然后显示页眉和页脚.但是我想显示默认的页眉和页脚而不等待整个页面加载.我的代码在这里.
I have common header components and footer components. countries list are loading on homepage. whenever click on the country. page will get reloaded and displaying text Loading... and then header and footer displaying. but I want to display the header and footer default without waiting for full page loaded. My code here.
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomepageComponent,},
{ path: ':city', component: CountryDetailComponent },
{ path: ':city/:subscategory', component: ExploreListComponent },
{ path: ':city/:subscategory/:singleitem', component: DetailedPageComponent },
];
app.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
template: `
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
`,
})
export class AppComponent { }
header.component.ts
import { Component,Renderer } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
moduleId: module.id,
selector: 'app-header',
template: `header html script`,
})
export class HeaderComponent {
constructor(title: Title) { }
}
footer.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-footer',
template: `comman footer html script`,
})
export class FooterComponent {
}
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
homepage.component.ts
@Component({
selector: 'my-app',
templateUrl: 'homepage.component.html',
styleUrls: ['homepage.component.css'],
providers: [ CountriesService]
})
export class HomepageComponent {
ngOnInit() {
}
}
推荐答案
我已经做了一个基本的演示，牢记您的要求:
I have made a basic demo keeping in mind your requirements:
公共页眉和页脚，您可以根据需要进行更改并在其中添加API.
Common header and footer, You can make changes and add APIs in it according to your need.
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
查看此Plunker: https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT
Check out this Plunker: https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT
这篇关于默认情况下，如何在角度2中显示常见的页眉和页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
