Angular10：如何导出一个模块中的多个组件

Question

我正在使用 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],

谢谢

Answer 1

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

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

您必须将 @NgModule() 中的 {} 视为一个对象。一个对象不能有两个同名的属性。在考虑 @NgModule().

中的 object 时应用相同的概念

Answer 2

海·拉胡尔

  exports: [
        HeaderComponent,
        BannerComponent,
    ],

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

Answer 3

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

exports:[HeaderComponent, BannerComponent]

Angular10：如何导出一个模块中的多个组件

Angular 10: How to export multiple components in a module

angular

angular10