angular 2 如何默认显示普通页眉和页脚？

Question

我有通用的页眉组件和页脚组件。国家列表正在主页上加载。每当点击国家。页面将重新加载并显示文本 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() {             
               }        
  }

Answer 1

根据您对当前行为的描述，听起来您使用的是标准 html 样式的链接，而不是 Angular 的 RouterLink。

请参阅 https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

中的文档

Answer 2

在这种情况下，将您的代码替换为：

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

Answer 3

我已经根据您的要求制作了一个基本演示：

页眉和页脚通用，您可以根据需要在其中进行更改和添加API。

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

看看这个 Plunker： https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT

Answer 4

您可以在终端中使用两次：

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.css
footer.component.html 和 footer.component.css

Answer 5

这是我遵循的方式，你可以在路由器出口加载所有其他页面

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

angular 2 如何默认显示普通页眉和页脚？

How to display common header and footer by default in angular 2?

ngroute

angular