手记

在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


未完待续!!!



作者:姜小骚
链接:https://www.jianshu.com/p/048f8a6c8952


0人推荐
随时随地看视频
慕课网APP