应该是模块还是组件Angular？

Question

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

我需要在某些页面的顶部和底部位置重复使用它。

我应该创建一个 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 {}

Answer 1

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

Answer 2

简而言之：每个 component/directive/pipe 都应该是应用程序中某个模块的一部分（只有一个）。如果您需要在两个或多个模块中使用组件，您需要将组件移动到 shared/feature 模块，并将该模块导入到您想要获得 component/pipe/directive.

的模块

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

更多详情：https://angular.io/guide/feature-modules#feature-modules

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

Answer 3

首先创建共享模块并注册

TranslateModule.forRoot({ 装载机：{ 提供：TranslateLoader，使用工厂：HttpLoaderFactory，部门：[HttpClient]， }, })

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

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

请看

应该是模块还是组件Angular？

Should it be module or component Angular?

angular

angular6

angular8