Question

我开始学习使用Angular，到目前为止看起来相当直接。我选择将我现有的一个网站主题转换为熟悉该流程，但遇到了有关正确使用的问题。

到目前为止，我的理解是每个页面都是一个组件。我的索引内容位于 app.component.html 中，然后每个子页面也是一个单独的组件。但是，我想将header/footer HTML分开，并将其包含在过去的PHP中。

我的问题是，header/footer应该是单独的组件，还是应该只是单个HTML文件，使用ng-include包含？我意识到要么会工作，但无法弄清楚哪个是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

您应该创建页眉和页脚组件并在AppComponent中使用它。

如果您想使用translate等i18n工具，或者如果您想要在用户登录时更改页眉或页脚，这将非常有用。

app结构应该是这样的。

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

这就是你需要拥有文件的方式。您不能将index.html中的组件作为app的angular bootstraps而不是其他组件。

使用Angular 4将页眉/页脚与内容分开

1 个答案: