web-dev-qa-db-fra.com

Comment afficher l’en-tête et le pied de page communs par défaut dans angular 2?

J'ai des composants d'entête communs et des composants de pied de page. liste des pays sont en cours de chargement sur la page d'accueil. chaque fois que vous cliquez sur le pays. la page sera rechargée et le texte affiché Loading... puis en-tête et pied de page affichant. mais je veux afficher les valeurs par défaut de l'en-tête et du pied de page sans attendre que la page entière soit chargée. Mon code ici.

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() {             
               }        
  }
angularngroute
13
Vel

J'ai fait une démo de base en tenant compte de vos exigences:

En-tête et pied de page communs, vous pouvez y apporter des modifications et y ajouter des API en fonction de vos besoins.

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Découvrez ce Plunker: https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT

12
AmanDeepSharma

vous pouvez utiliser deux fois dans le terminal:

ng generate component header
ng generate component footer

Ensuite, dans le fichier d’application principal HTML (c.-à-d. app.component.html) vous devez inclure les 2 balises:

<app-header></app-header>
<app-footer></app-footer>

c'est la première chose à faire.

Ensuite, vous devez renseigner vos modèles:

  • header.component.html et le style dans header.component.css
  • footer.component.html et le style dans footer.component.css
7
Mohit Sahore

D'après votre description du comportement actuel, il semblerait que vous utilisiez des liens standard de style html, au lieu de RouterLink d'Angular.

Voir la documentation sur https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

1
GreyBeardedGeek

Dans ce cas, remplacez votre code par ceci:

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>
       <app-header></app-header>
       <my-app>Loading...</my-app>
       <app-footer></app-footer>
    </body>
</html>

app.component.ts

import { Component } from '@angular/core';

    @Component({
      moduleId: module.id,
      selector: 'my-app',
      template: `
        <router-outlet></router-outlet>
      `, 
    })
    export class AppComponent { }
0
Vivek Doshi