ionic4学习笔记（四）--自定义公共模块

最新推荐文章于 2023-08-15 16:11:01 发布

盼盼盼

最新推荐文章于 2023-08-15 16:11:01 发布

阅读量958

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 ionic 混合APP angular

本文链接：https://blog.youkuaiyun.com/come0across/article/details/98622282

前端同时被 3 个专栏收录

54 篇文章

订阅专栏

angular

26 篇文章

订阅专栏

混合APP

15 篇文章

订阅专栏

本文介绍在 Ionic4 中如何创建并使用自定义公共模块，以实现组件的跨模块复用。通过将组件封装为模块，解决在不同模块间引用组件时遇到的错误。在创建了一个tabs项目后，通过命令添加组件到公共模块，然后在其他模块中引用该组件，遇到了未声明或未导入的错误。错误信息涉及到Angular的CompileMetadataResolver和JitCompiler。解决这个问题后，成功实现了组件的跨模块引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在angular中，我们都是自定义组件来使用，但是ionic4之后，沿用了angular的模块化思想，使用懒加载的方式加载页面，每个页面都是一个模块，要是继续创建组件的话，不能在多个模块中引用同一组件，所以我们要把组件创建为模块，让模块来引用模块。

创建一个tabs项目，在项目中执行命令

ionic g module module/list
ionic g component module/list

在这里插入图片描述

在list.module.ts中引入ListComponent，并且将ListComponent暴露出去

在其他模块中引用

报错：

ERROR Error: Uncaught (in promise): Error: Can’t export directive ListComponent from ListModule as it was neither declared nor imported!
Error: Can’t export directive ListComponent from ListModule as it was neither declared nor imported!
at syntaxError (compiler.js:2175)
at compiler.js:19906
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:19896)
at CompileMetadataResolver.getNgModuleSummary (compiler.js:19748)
at compiler.js:19830
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:19808)
at JitCompiler._loadModules (compiler.js:25582)
at JitCompiler._compileModuleAndComponents (compiler.js:25565)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)