如何在angular 2中默认显示常见的页眉和页脚？答案

【问题标题】：How to display common header and footer by default in angular 2?如何在angular 2中默认显示常见的页眉和页脚？
【发布时间】：2017-09-20 16:44:10
【问题描述】：

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

【问题讨论】：

这应该是默认行为。如果您使用imports: [RouterModule.forRoot(myRoutes, {useHash: true})]，请尝试此问题是否得到解决
@GünterZöchbauer，不工作。
很难说，因为这应该可以。你能在 Plunker 中复制吗？
@GünterZöchbauer，看到这个 plunker plnkr.co/edit/P1jR4cj4m2yiP2NoAHs5?p=preview。没有错误。但页面未加载。
它什么也没做。您应该将文件移动到src 文件夹中。只需双击文件名并在它们前面加上src/

标签： angular ngroute

【解决方案1】：

我做了一个基本的演示，牢记您的要求：

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

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

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

【讨论】：

如何将参数从根组件“下方”的组件传递到页脚和页眉？
@Azimuth 你能详细说明你想做什么吗？
没想到会这么简单！很好，谢谢！
@aman: 先生如何通过会话进行管理，如果用户登录和注销情况，我们会显示不同的标题？
我觉得只是为了展示它是如何完成的，上面的示例 sn-p 就足够了，但是如果考虑如何显示 404 组件/页面，特别是如果您的 404 不包括页眉和页脚（大多数情况下）那么您需要重新考虑您的组件架构

【解决方案2】：

你可以在终端使用两次：

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 中的样式

【讨论】：

【解决方案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 { }

【讨论】：

仍在工作。页眉和页脚显示两次。
请您发布主页组件
对两个组件都使用选择器：'my-app'？
我就是这样用的。不知道怎么在首页使用？
我尝试使用选择器：'主页'，但没有成功

【解决方案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 -->

【讨论】：

问题是 2 年前提出的。