我有常见的标题组件和页脚组件.国家/地区列表正在主页上加载.每当点击国家.页面将重新加载并显示文本Loading...,然后显示页眉和页脚.但我想显示页眉和页脚默认值而不等待加载完整页面.我的代码在这里.
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() {
}
}
Ama*_*rma 12
我做了一个基本的演示,记住你的要求:
通用页眉和页脚,您可以根据需要进行更改并添加API.
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
看看这个Plunker:https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT
小智 7
您可以在终端中使用两次:
ng generate component header
ng generate component footer
然后,在主应用程序文件HTML(即app.component.html)中,您必须包含2个标记:
<app-header></app-header>
<app-footer></app-footer>
这是第一件事.
然后你必须填充你的模板:
header.component.html 和造型 header.component.cssfooter.component.html 和造型 footer.component.css | 归档时间： |
|
| 查看次数： |
50811 次 |
| 最近记录： |