Angular中的核心模块组件和共享模块实现

Posted 2023-02-22

【中文标题】Angular中的核心模块组件和共享模块实现

【英文标题】：Core module component and Shared module implementation in angular

【发布时间】：2019-06-17 06:15:41

【问题描述】：

我想在我的 Angular 应用 (> v2) 中实现核心/共享模块结构。

我添加了带有核心组件和共享模块的核心模块。接下来我为http添加了简单的数据表示和数据服务组件。

Core 模块具有 CommonModule 和 HttpClientModule 导入、CoreComponent 声明和作为提供者的数据服务。

用于数据表示的共享模块导出组件（ProductSectionComponent）

CoreComponent 有“app-product-section”标记。

这是我的代码：

app.module:

从'./shared/shared.module'导入SharedModule； 从'./core/core.module'导入CoreModule； 从“@angular/platform-b​​rowser”导入 BrowserModule ； 从'@angular/core'导入 NgModule ； 从'./app.component'导入AppComponent； @NgModule( 声明：[ 应用组件 ], 进口：[ 浏览器模块， 核心模块， 共享模块 ], 提供者：[]， 引导程序：[AppComponent] ) 导出类 AppModule

核心模块：

从'./../services/data.service'导入DataService； 从'@angular/core'导入 NgModule，可选，SkipSelf ； 从“@angular/common”导入 CommonModule ； 从'./core.component'导入CoreComponent； 从“@angular/common/http”导入 HttpClientModule ； @NgModule( 进口：[ 通用模块， HttpClient模块 ], 声明：[核心组件]， 提供者：[数据服务]， 出口：[核心组件] ) 导出类 CoreModule /* 确保 CoreModule 仅由 AppModule 中的一个 NgModule 导入 */ 构造函数 ( @Optional() @SkipSelf() parentModule: CoreModule ) 如果（父模块） throw new Error('CoreModule 已加载。仅在 AppModule 中导入');

核心组件：

shared.module：

从'./../public/product-section/product-section.component'导入 ProductSectionComponent ； 从'@angular/core'导入 NgModule ； 从“@angular/common”导入 CommonModule ； @NgModule( 声明：[ProductSectionComponent]， 进口：[ 通用模块 ], 出口：[ 产品部分组件 ] ) 导出类 SharedModule

现在，我在 core.component.html 中遇到了问题：

'app-product-section' 不是已知元素： 1. 如果 'app-product-section' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果“app-product-section”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

当我将 SharedModule 添加到 CoreModule 导入时问题解决了，但我觉得这不是 Core/Shared 结构的本质。

【问题讨论】：

这是因为要使用必须在模块中导入的元素我认为没有办法解决这个问题，因为您的意图是嵌入具有自己模块的子组件如果您的目的是在省略核心组件的同时延迟加载子组件，您可以通过路由模块实现这一点。否则，我建议你创建一个在加载 SharedModule 时默认加载的通用组件

【参考方案1】：

CoreModule 背后的意图是保存在整个应用程序中使用的所有单例服务。

就 SharedModule 而言，它应该包含 UI 组件、服务、管道等，可供多个功能模块使用。

我认为您必须重新考虑项目的结构。请参考 angular.io 指南Link