如何在角度2默認顯示公共頁眉和頁腳？

我有共同的標題組件和頁腳組件。國家列表正在主頁上加載。每當點擊國家。頁面將重新加載並顯示文本Loading...，然後顯示頁眉和頁腳。但我想顯示頁眉和頁腳默認情況下不等待整個頁面加載。我的代碼在這裏。如何在角度2默認顯示公共頁眉和頁腳？

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

來源

2017-04-24 vel

這應該是默認行爲。如果你使用'進口：[RouterModule.forRoot（myRoutes，{useHash：true}）]' –

@GünterZöchbauer，請不要試圖解決這個問題。 – vel

很難說，因爲這應該是正常的。你可以在Plunker中重現嗎？ –

我已經做了一個基本演示記住你的要求：

共同的頁眉和頁腳，您可以根據需要進行更改和添加API。

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

看看這個Plunker： https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT

來源

2017-05-04 18:20:19

謝謝。它的工作正常。 – vel

如何將組件的「下方」組件的參數傳遞給頁腳和頁眉？ – Azimuth

@Azimuth你能詳細說明你想要做什麼嗎？ –

從你的當前行爲的描述，聽起來像你使用標準的HTML風格的鏈接，而不是Angu lar的RouterLink。

看到https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

來源

2017-04-24 06:28:37 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 { }

來源

2017-04-24 07:08:45

前加上前綴即可。頁眉和頁腳顯示兩倍。 – vel

請問您是否需要發佈主頁組件 –

使用選擇器：'my-app'，用於這兩個組件？ –

，你可以在終端使用兩次：

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 +

來源

2017-09-05 06:09:21

如何在角度2默認顯示公共頁眉和頁腳？

回答

相關問題