Angular 10：如何在一个模块中导出多个组件答案

【问题标题】：Angular 10: How to export multiple components in a moduleAngular 10：如何在一个模块中导出多个组件
【发布时间】：2020-08-02 02:43:01
【问题描述】：

我使用的是 Angular 10 版本。有一些类似的问题，但他们没有解决我的问题。

在我的 Angular 项目中，我制作了两个模块，分别命名为 post 和 static。 post 模块有10个组件。我想在 app.component.html 中使用所有这些组件。

我的尝试

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

import { PostRoutingModule } from './post-routing.module';
import { ServiceofferedComponent } from './serviceoffered/serviceoffered.component';
import { FeaturesComponent } from './features/features.component';
import { WorksampleComponent } from './worksample/worksample.component';
import { PricingComponent } from './pricing/pricing.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { ChooseserviceComponent } from './chooseservice/chooseservice.component';
import { DisplayresultComponent } from './displayresult/displayresult.component';
import { HeaderComponent } from './header/header.component';
import { BannerComponent } from './banner/banner.component';






@NgModule({
  declarations: [ ServiceofferedComponent, FeaturesComponent, WorksampleComponent, PricingComponent, LoginComponent, SignupComponent, ChooseserviceComponent, DisplayresultComponent, HeaderComponent, BannerComponent],
  imports: [
    CommonModule,
    PostRoutingModule
  ],
  exports:[HeaderComponent],
  exports:[BannerComponent],


  
  
})
export class PostModule { }

我尝试使用exports:[BannerComponent],。第一次导出没问题。它没有显示任何错误，但对于第二个它显示错误。我有更多的组件我将如何导出和没有导出我不能在app.component.html中使用@

我遇到了错误

   
    ERROR in src/app/post/post.module.ts:28:3 - error TS1117: An object literal cannot have multiple properties with the same name in strict mode.
    
    28   exports:[BannerComponent],
         ~~~~~~~
    src/app/post/post.module.ts:28:3 - error TS2300: Duplicate identifier 'exports'.
    
    28   exports:[BannerComponent],

谢谢

【问题讨论】：

标签： angular angular10

【解决方案1】：

海拉胡尔

  exports: [
        HeaderComponent,
        BannerComponent,
    ],

只写一次，对于你必须导出的模块。希望对您有所帮助

【讨论】：

【解决方案2】：

要导出多个组件，您应该包含在exports 数组中

    ...
    @NgModule({
              declarations: [ ServiceofferedComponent, FeaturesComponent, WorksampleComponent, PricingComponent, LoginComponent, SignupComponent, ChooseserviceComponent, DisplayresultComponent, HeaderComponent, BannerComponent],
              imports: [
                CommonModule,
                PostRoutingModule
              ],
              exports:[HeaderComponent, BannerComponent],
        })
    ...

您必须将@NgModule() 中的{} 视为一个对象。一个对象不能有两个同名的属性。在考虑@NgModule() 中的object 时，也应用了相同的概念。

【讨论】：

【解决方案3】：

您只需要一个exports 属性并将所有需要导出的组件添加到该数组中

exports:[HeaderComponent, BannerComponent]

【讨论】：