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