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