它应该是模块还是组件 Angular？答案

【问题标题】：Should it be module or component Angular?它应该是模块还是组件 Angular？
【发布时间】：2020-07-02 19:53:18
【问题描述】：

我有一个依赖于服务的分页组件。

我需要在顶部和底部位置的某些页面中重用它一个组件。

我应该创建一个pagination.module 来注册分页服务和组件，还是只在app.module 中声明分页组件？

同时发出分页组件包含翻译管道：| translate。该管道在app.module注册，在PaginationComponent不可用

分享模块是：

    @NgModule({
        imports: [CommonModule, HeaderModule, FooterModule, ReactiveFormsModule, MaterialModule, FormsModule],
        declarations: [
            BadgeComponent,
            LegendaComponent,
            DateControlBadgeDirective,
            CollectionStatusDocsDirective,
            OrderFilterComponent,
            SortringComponent,
            SignDocumentComponent,
            NavNotificationsComponent,
            LoaderComponent,
            FilterComponent,
            DropdownExecutorsComponent,
            ListFilterPipe,
            SortByPipe,
            ApplicationNamePipe,
            PaginationComponent,
        ],
        exports: [
            BadgeComponent,
            SignDocumentComponent,
            LoaderComponent,
            SortringComponent,
            FilterComponent,
            DropdownExecutorsComponent,
            LegendaComponent,
            ApplicationNamePipe,
            PaginationComponent,
            DateControlBadgeDirective,
            CollectionStatusDocsDirective,
            HeaderModule,
            FooterModule,
            ReactiveFormsModule,
            MaterialModule,
            FormsModule,
            ListFilterPipe,
            SortByPipe,
            ApplicationNamePipe,
        ],
    })
    export class SharedModule {}

应用模块是：

    @NgModule({
        declarations: [AppComponent],
        imports: [
            BrowserModule,
            AppRoutingModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
            BrowserAnimationsModule,
            MaterialModule,
            HeaderModule,
            FooterModule,
            DashboardModule,
            OrdersDistributionModule,
            OrdersExecutionModule,
        ],
        providers: [{ provide: LOCALE_ID, useValue: 'ru' }],
        bootstrap: [AppComponent],
    })
    export class AppModule {}

【问题讨论】：

标签： angular angular6 angular8

【解决方案1】：

将其创建为组件并在您的 app.module 或任何其他模块中声明该组件。如果您在 app.module 中声明 Pagination 组件，那么它可以访问您的翻译管道

【讨论】：

是的，我这样做了，但是管道翻译不可用，但是我在sharemodule中注册了分页组件，并且将共享模块导入了app.module，可以吗？
您的管道是否在 app.module 的 export[] 中可用？如果没有，您将无法在共享模块组件中使用它
你能更新 app.module 和共享模块代码吗？
我在你的声明数组中看不到翻译
在app.module中，再看

【解决方案2】：

简而言之：每个组件/指令/管道都应该是应用程序中某个模块的一部分（只有一个）。如果您需要在两个或更多模块中使用组件，则需要将组件移动到共享/功能模块，并将该模块导入您想要获取组件/管道/指令的模块。

TranslatePipe 是 TranslateModule 的一部分（如果您使用 NgxTranslate），因此要在组件中使用 TranslatePipe - 您应该将 TranslateModule 导入到声明组件的模块中。

注意：您导入到 AppModule 的所有内容都将成为主包的一部分（将加载到应用程序的每个页面上），因此如果您仅在延迟加载的模块中使用分页，最好将其移动到 PaginationModule 并导入模块到您需要 PaginationComponent 的模块。

【讨论】：

我应该在 ShareModule 和 AppModule 中导入TranslateModule.forRoot({}) 吗？并且共享模块总是必须导入到 app.module 中？
我已经将 translateModule 导入 shareModule 并且它可以工作，我是否应该在 shareModule 中添加 translateModule 以导出并从应用模块中删除 translateModule？
你应该只在你的 AppModule 中有 .forRoot()，在其他模块中只导入 TranslateModule，更多信息：angular.io/guide/singleton-services#the-forroot-pattern
NgxTranslate 中的 forRoot() 为翻译提供加载器和源（它应该只被调用一次）。因此，如果您在 SharedModule 中调用“forRoot”，您会在应用程序中获得重复的翻译。如果您只导入SharedModule TranslateModule 您可以访问翻译指令/管道，这些管道/指令将使用您在 AppModule 中初始化加载一次的翻译（因此您可以在应用程序中的所有模块之间共享您的翻译）。

【解决方案3】：

首先创建共享模块并注册

TranslateModule.forRoot({ 装载机：{ 提供：TranslateLoader， useFactory: HttpLoaderFactory, 部门：[HttpClient]， }, })

在共享模块内并导出 TranslateModule
然后将共享模块导入到 AppModule 或任何功能模块中
然后在共享文件夹中创建服务和 PaginationComponent 并注册到共享模块
然后导出分页组件

现在您可以在任何功能模块中使用转换管道和 PaginationComponent

请看Angular 5 and ngx-translate with shared module loose translations if refresh

【讨论】：