Ionic引用公共组件

尤山海

于 2021-06-14 12:25:03 发布

阅读量326

点赞数

分类专栏： ionic 文章标签： html angular

本文链接：https://blog.csdn.net/xxc_yc/article/details/117823116

版权

ionic 专栏收录该内容

1 篇文章

订阅专栏

本文档介绍了如何在Ionic应用中创建和引入自定义组件。首先，创建一个公共模块和组件文件夹，然后在公共模块中声明并导出组件。接着，在需要使用该组件的模块中导入公共模块。最后，在HTML模板中引用该组件。通过这种方式，可以实现组件的复用和组织。

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

引入自定义组件

  /* 思路：
        1. 创建一个公共的module模块
        2. 创建公共组件，同公共模块放在同一个文件夹里
        3. 在公共模块里暴露对应的组件
        4. 在需要的地方引入自定义模块，并在依赖注入自定义模块
        5. 在html中使用公共模块
  */

  // 新建公共模块及组件
  ionic g module module/list
  ionic g component module/list
  // 公共模块list.module.ts中暴露对应的组件
  import { ListComponent } from './list.component'

  @NgModule({
    declarations:[ListComponent],
    exports:[ListComponent]
  })
  // 在 tab2.module.ts 中引入
  import { ListModule } from '../module/list/list.module'
  @NgModule({
    imports: [
      ListModule
    ]
  })
  // 在tab.page.html中使用
  <app-list></app-list>