美文网首页Ionicionic学习与开发
在ionic项目中使用自定义组件(component),踩坑之路

在ionic项目中使用自定义组件(component),踩坑之路

作者: 雨生_ | 来源:发表于2018-01-08 17:17 被阅读732次

    简单来个前言,组件化是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

    未完待续!!!

    相关文章

      网友评论

        本文标题:在ionic项目中使用自定义组件(component),踩坑之路

        本文链接:https://www.haomeiwen.com/subject/zgvbnxtx.html