Question

现在我正在app.module导入一大堆单独的组件，以涵盖我需要使用的所有内容。

AppModule
    -Header Component
    -Header Sub-Component 1
    -Header Sub-Component 2
    -Header Sub-Component 3

我理想的做法不是在app.module中全部导入它们，我想创建一个header.module来处理导入所有自己的组件，以便{{1}只需导入app.module，header.module处理自己的依赖项。

我已经尝试了很多这样做的方法，但我似乎无法让它发挥作用。结构需要什么？

我试图这样做：

header.module

在import { HeaderModule } from "./header/header.module";中，然后有AppModule看起来像：

HeaderModule

只是为了尝试获取模块＆gt;组件关系设置，但是当我这样做时，调用// Core import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; // Components import { HeaderComponent } from "./header.component"; import { ButlerBarComponent } from './butler/butler.component'; @NgModule({ declarations: [ HeaderComponent, ButlerBarComponent ], imports: [BrowserModule], providers: [], bootstrap: [ButlerBarComponent] }) export class HeaderModule { }中的标头组件的声明不再能够访问app.component.html选择器。

我需要做些什么来完成这项工作，以便我可以将header标记放在<header></header>中并让应用加载app.component.html和后续的header.module并制作header.component选择器可用于header？

Answer 1

您需要在HeaderModule中声明所有这些组件，然后将其导出，以便AppModule在HeaderModule中导入AppModule时可以访问它们。另外，您应该只在BrowserModule中导入AppModule，而在导入CommonModule的其他模块中导入ngIf，因为它包含ngFor，ngClass等常用指令， AppModule等等。最后，您不需要在此处启动，因为您只在应用中引导一个组件，并在HeaderModule中执行此操作。因此，您的import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HeaderComponent } from "./header.component"; import { ButlerBarComponent } from './butler/butler.component'; @NgModule({ imports: [ CommonModule ], declarations: [ HeaderComponent, ButlerBarComponent ], exports: [ HeaderComponent, ButlerBarComponent ] }) export class HeaderModule { }应如下所示：

HeaderModule

现在您只需要将AppModule添加到ESAA_OCT15 <- readLines('http://www.treasurydirect.gov/govt/reports/tfmp/utf/es/dfiw01015tses.txt') # Select lines with / z = grepl(pattern = "/",x = ESAA_OCT15) d = trimws(ESAA_OCT15[z]) dates = substr(d,0,10) sharesPar = substr(d,11,41)的导入内容中，您就应该准备好了。

使用实现自己组件的子模块

1 个答案: