web-dev-qa-db-ja.com

angular 2？でデフォルトで共通のヘッダーとフッターを表示する方法

共通のヘッダーコンポーネントとフッターコンポーネントがあります。国のリストがホームページにロードされています。国をクリックするたびに。ページが再読み込みされ、テキストが表示されます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() {             
               }        
  }
angularngroute
13
Vel

お客様の要件を念頭に置いて、基本的なデモを作成しました。

共通のヘッダーとフッター。必要に応じて変更したり、APIを追加したりできます。

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

このPlunkerを確認してください： https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT

12
AmanDeepSharma

ターミナルで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のスタイリング
7
Mohit Sahore

現在の動作の説明から、AngularのRouterLinkではなく、標準のHTMLスタイルのリンクを使用しているようです。

https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html のドキュメントを参照してください

1
GreyBeardedGeek

その場合、コードを次のように置き換えます。

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 { }
0
Vivek Doshi