ionic4开发——组件的使用

组件经常使用，一直不觉得有多难，直到昨天给一个做ionic4开发的人怎么也说不明白，干脆总结一下，拿去直接用。

1. 新建组件share，使用命令ng g xxx，怎么知道的？具体参考：https://www.angular.cn/cli/generate，多看几遍官网是有道理的。下面的components.module.ts也是命令建的，别再问我创建了这个文件里面写什么。
   
   新建组件.jpg
   
   注意我的工程结构

2. 把组件放到组件模块components.module.ts，我这里采用一个公共的就行了，你也可以分类。

   
   
   把组件放到组件模块.jpg

3. 再把这个组件导出去，这个index.ts的作用你懂的。

   
   
   导出组件.jpg

4. 直接使用这个组件模块也行，但是有很多公用的模块，我干脆放到一个公用模块shared.module.ts。

   
   
   提取公用模块.jpg

5. 接下来就是页面使用

   
   
   使用组件1.jpg
   
   
   使用组件2.jpg

6. 效果图

   
   
   效果图.jpg
7. 后续，由于Angular里面一切皆组件，其实从ng g xxx创建的文件就知道，创建的都是组件，只是文件长得不一样负责的功能不一样，那么自动义管道pipe，也需要一个公用的管道模块pipes.module.ts（类似components.module.ts），然后这个模块就可以注入到页面（如：about.module.ts）或者components.module.ts（当你在自定义组件使用自定义管道的时候）。有兴趣的可以加ionic4开发群：670727319等你一起学习。