1.9 ionic3入门——自定义组建component

在实际项目中，我须要间一个悬浮按钮，在当前页面建好以后，其余页面也须要，这个时候我能够选择在须要这个组建的页面中一次次复制粘贴个人代码，工做量不大，但这样光想想就要被枪毙（最近的假新闻，程序员因代码不规范，枪杀同事，http://www.sohu.com/a/255628694_100250530）
因此，咱们仍是来自定义一个组建解决这个问题吧～
（1）新建组建

ionic g component float_btn

这个时候就会在components文件夹下面的components.modules.ts中引入新建的组建
（2）组建内容

<ion-fab right middle > <button ion-fab color="light" style="opacity: 0.8"><ion-icon name="md-add" color="dark" large></ion-icon></button> <ion-fab-list side="left"> <button ion-fab><ion-icon name="ios-call" color="danger"></ion-icon></button> </ion-fab-list> <ion-fab-list side="top"> <button ion-fab><ion-icon name="ios-megaphone" color="primary"></ion-icon></button> </ion-fab-list> <ion-fab-list side="bottom"> <button ion-fab><ion-icon name="ios-clipboard" color="secondary"></ion-icon></button> </ion-fab-list> </ion-fab> 

（3）配置components.modules.ts
若是直接引用上面的组建，会报错，会提示你 ion-icon 是不能识别的元素，那是由于这个时候新建的组建还不能使用ionic的官方组建，但能够使用html的元素，好比你写个h2之类的是能够引用的，因此在自定义组建中要用ionic官方组建还须要额外配置
在components.modules.ts中引入ionic-angular

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 

并在imports中声明

imports: [
        IonicModule.forRoot(ComponentsModule) 
    ],

（4）配置app.modules.ts
在app.modules.ts中引入ComponentsModule

import { ComponentsModule } from '../components/components.module'; 

并在imports中声明

imports: [
  BrowserModule,
  ComponentsModule,//components模块 IonicModule.forRoot(MyApp) ], 

（5）使用自定义组建

<float-btn></float-btn> 

 

image.png