在ionic项目中使用自定义组件（component），踩坑之路

简单来个前言，组件化是ionic&Angular通用的内容，下面用简单的文章创建一个自定义组件。

一、快速开始

• 创建工程 ionic start 'project name' blank
• 创建组件 ionic g component 'component name'
• 运行项目 ionic serve

tips: 关于ionic的一些命令，不在这里介绍，可以参阅官网。

二、关键项配置（踩坑项配置）

• 当我们创建好组件的时候，会生成一个component的文件夹，除了装了我们创建的组件外，还有一个components.module.ts 文件，这个文件主要帮助我们把我们所有的组件统一装起来，之后把这个文件导入到app.module.ts 里面的imports和providers里面就可以了
  

  

  图1

• 如果你只是用某一个组件，则需要把组件的名字放在declarations 和 enterComponents，这个跟component.module不一样。

• 放到app.module.ts意味着你在所有页面都可以用这个组件，如果只在某个页面用，那就把它导入到指定页面的module.ts文件里面就可以了。

• 最后最重要的一条，当你在你的组件里面，想要使用ionic的控件，加载之后，发现样式都消失了，这个时候，你需要在你的组件的module.ts(如果你使用component.module.ts,则在这里操作就可以了) 文件中，import进来 IonicModule，这样才能在你的组件中使用ionic的样式控件。
  

  

  图2

未完待续！！！