Question

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

Answer 1

我已经做了一个基本的演示，记住你的要求：

公共页眉和页脚，您可以根据需要进行更改并添加API。

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

查看此Plunker： https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT

Answer 2

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

app.component.html

然后，在主应用文件HTML（即<app-header></app-header> <app-footer></app-footer>）中，您必须包含2个标记：

header.component.html

这是第一件事。

然后您必须填充模板：

header.component.css以及footer.component.html
footer.component.css以及getView

Answer 3

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

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

上的文档

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

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

如何在角度2中默认显示公共页眉和页脚？

5 个答案: