使用Angular 4將頁眉/頁腳與內容分開

Question

我已經開始學習使用Angular，到目前為止，它似乎還很簡單。 我選擇轉換現有網站主題之一以熟悉該過程，但遇到了有關正確使用的問題。

到目前為止，我的理解是每個頁面都是一個組件。 我的索引內容在app.component.html中 ，然后每個子頁面也是一個單獨的組件。 但是，我想分離header/footer HTML，並像過去使用PHP一樣包含它。

我的問題是， header/footer應該是單個組件，還是應該是使用ng-include包含的單個HTML文件？ 我意識到這兩種方法都可以，但是無法弄清楚Angular開發人員的傳統實現是什么。

我正在嘗試以下方法，但頁眉/頁腳組件似乎未加載。 它們可以從app.component.html正常工作，但不能從index.html正常工作。

的index.html

<body>
  <app-header></app-header>
  <app-root></app-root>
  <app-footer></app-footer>
</body>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { ProductComponent } from './product/product.component';
import { ProductsComponent } from './products/products.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    ProductComponent,
    ProductsComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您應該創建Header和footer組件，並在AppComponent使用它。

如果您想使用諸如translate類的i18n工具，或者如果用戶登錄后想要更改頁眉或頁腳，這將很有幫助。

應用的結構應該是這樣的。

AppComponent
|
|----> HeaderComponent
|----> Router-Outlet ---> Page content should be in the container.
|----> FooterComponent

這就是您需要文件的方式。 您不能將index.html中的組件作為應用程序的角度引導程序，而不能用於其他組件。

使用Angular 4將頁眉/頁腳與內容分開

問題描述

1 個解決方案

解決方案1
1 已采納 2018-01-12 05:25:55

使用Angular 4將頁眉/頁腳與內容分開

問題描述

1 個解決方案

解決方案1 1 已采納 2018-01-12 05:25:55

解決方案1
1 已采納 2018-01-12 05:25:55