Tengo componentes de encabezado y componentes de pie de página comunes. la lista de países se está cargando en la página de inicio. cada vez que haga clic en el país. la página se volverá a cargar y mostrará el texto Loading... y luego se mostrará el encabezado y el pie de página. pero quiero mostrar el encabezado y el pie de página predeterminados sin esperar a que se cargue la página completa. Mi código aquí.
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 }, ];aplicación.componente.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 { }encabezado.componente.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) { } }pie de página.componente.ts
import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'app-footer', template: `comman footer html script`, }) export class FooterComponent { }índice.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>página de inicio.component.ts
@Component({ selector: 'my-app', templateUrl: 'homepage.component.html', styleUrls: ['homepage.component.css'], providers: [ CountriesService] }) export class HomepageComponent { ngOnInit() { } }He hecho una demostración básica teniendo en cuenta sus requisitos:
Encabezado y pie de página comunes, puede realizar cambios y agregar API según sus necesidades.
<app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>Echa un vistazo a este Plunker: https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT
podrías usar dos tiempos en la terminal:
ng generate component header ng generate component footer Luego, en el HTML del archivo principal de la aplicación (es decir app.component.html ) debe incluir las 2 etiquetas:
<app-header></app-header> <app-footer></app-footer>esto es lo primero que hay que hacer.
Luego debe completar sus plantillas:
header.component.html y el estilo en header.component.cssfooter.component.html y el estilo en footer.component.cssSegún su descripción del comportamiento actual, parece que está utilizando enlaces de estilo html estándar, en lugar de RouterLink de Angular.
Consulte la documentación en https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html