Как отобразить общий верхний и нижний колонтитулы по умолчанию в angular 2?

У меня есть общие компоненты заголовка и компоненты нижнего колонтитула. список стран загружается на главную страницу. всякий раз, когда вы нажимаете на страну. страница будет загружаться и отображать текст Loading..., а затем отображать верхний и нижний колонтитулы. но я хочу показать по умолчанию верхний и нижний колонтитулы, не дожидаясь полной загрузки страницы. Мой код здесь.

приложение-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

Я сделал базовую демонстрацию, учитывая ваши требования:

Общий верхний и нижний колонтитул, вы можете вносить изменения и добавлять в него API в соответствии с вашими потребностями.

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

Посмотрите этот Plunker: https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT

Ответ 2

Вы можете использовать два раза в терминале:

ng generate component header
ng generate component footer

Затем в основной файл приложения HTML (т.е. app.component.html) необходимо включить 2 app.component.html:

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

это первое, что нужно сделать.

Затем вы должны заполнить ваши шаблоны:

header.component.html и стиль в header.component.css
footer.component.html и стиль в footer.component.css

Ответ 3

Из вашего описания текущего поведения это похоже на то, что вы используете стандартные ссылки в стиле html, вместо Angular RouterLink.

Смотрите документацию на https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

Ответ 4

В этом случае замените код следующим образом:

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