How to display common header and footer by default

2020-02-09 08:20发布

问题:

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

回答1:

I have made a basic demo keeping in mind your requirements:

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>

Check out this Plunker: https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT



回答2:

you could use two times in the terminal:

ng generate component header
ng generate component footer

Then, in the main app file HTML (i.e. app.component.html) you must include the 2 tags:

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

this is the first thing to do.

Then you must populate your templates:

  • header.component.html and the styling in header.component.css
  • footer.component.html and the styling in footer.component.css


回答3:

From your description of the current behavior, it sounds like you are using standard html-style links, instead of Angular's RouterLink.

See the documentation at https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html



回答4:

In that case replace your code with this :

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 { }


回答5:

this is the way I have followed, you can load all other pages in the router outlet

<div id="wrapper" style="height: 100vh;">

<!-- Sidebar -->
<app-sidebar [isToggle]="true"></app-sidebar>
<!-- End of Sidebar -->

<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
    <!-- Main Content -->
    <div id="content">
        <!-- Topbar -->
        <app-header></app-header>
        <!-- End of Topbar -->
        <!-- Begin Page Content -->
        <div class="container-fluid">
            <router-outlet></router-outlet>
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- End of Main Content -->
    <!-- Footer -->
    <app-footer></app-footer>
    <!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->