Question

我正在重新设计我的应用程序，以便在UI方面更加模块化，将事情分离出来：

App标题
向左导航面板
导航面板右侧的主要内容

我已经设法找出如何将单个组件导入Angular方式，将组件导入app.module.ts并在declarations区域中进行设置。这样我就可以从HTML中调用并显示我的应用标题！

然而，当我试图同时做一批这些时，我遇到了困难......

我看到一条错误消息，例如：

错误：模块'AppModule'声明的意外模块'ComponentExportModule'。请添加@ Pipe / @ Directive / @ Component注释。

app.module.ts

//More imports are above...
import {ComponentExportModule} from '../UI-Components/component-export.module';
@NgModule({
  imports:      [
    //Imports are here
  ],
  declarations: [
    AppComponent,
    ComponentExportModule
  ],
  providers:[
    //Stuff is here
  ],
  bootstrap:    [ AppComponent]
})
export class AppModule { }

组件export.module.ts

import { NgModule } from '@angular/core';

import {AppHeaderComponent} from './app-header.component';
import {PageContentComponent} from './page-content.component';
import {SideNavComponent} from './side-nav.component';

@NgModule({
  imports: [
    AppHeaderComponent,
    PageContentComponent,
    SideNavLinkListComponent
  ],
  exports: [
    AppHeaderComponent,
    PageContentComponent,
    SideNavComponent
  ]
})
export class ComponentExportModule {}

然后我希望在app.module.html文件中以通常的方式使用我的组件，例如：

<app-header/>
<nav-bar/>
<page-content/>

Answer 1

你的app.module.ts错了。 ComponentExportModule需要添加到app.module.ts中的imports数组中，而不是声明。始终导入模块。声明组件，指令和管道。

此外，当您将共享组件添加到应用程序模板（app.component.html）时，您将需要使用标准元素表示法，例如：<app-header></app-header>而不是</app-header>，因为只有void和foreign元素可以自我封闭

如何导入一组组件以用作HTML标记 - Angular

1 个答案: