ionic3 添加多個自定義組件

往往我們創建自定義組件一般都不止只會創建一個自定義組件，創建多個方式如下。

1.創建自定義組件

ionic g component select-car-no

ionic g component aera-picker

 

2.全局導入到app.module.ts文件並添加到imports配置中聲明里面

app.module.ts

//導入自定義組件

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

@NgModule({

Declarations:[xxx],

imports: [ /*依賴的模塊*/

...

ComponentsModule  //導入自定義組件依賴  注意是這里導入

...

 

3. 修改components.module.ts文件

命令行直接生產后的components.module.ts文件里面可能沒有幫我們在imports數組里面自動添加配置，需要我們手動引入模塊並配置

添加BrowserModule 、IonicModule模塊

import { BrowserModule } from '@angular/platform-browser';

import { IonicModule} from 'ionic-angular';

//配置imports項

imports: [

BrowserModule,

IonicModule.forRoot(ComponentsModule) /*注入IonicModule 注意寫法ComponentsModule為你當前的模塊名稱*/

    ]

其中注意IonicModule.forRoot(ComponentsModule)中的ComponentsModule為該文件全局導出的名稱

export class ComponentsModule {}

 

4.在需要使用自定義組件的pages下的xx.module.ts文件里面導入

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

imports: [

ComponentsModule, //添加

IonicPageModule.forChild(UserCarinfoPage)

],

 

5.頁面上使用

<select-car-no #selectCarNo class="car-select-no-box" (childOuterSelectedValue)="selectedCarValueFromChild($event)" [carNoValFromParent]="carNum"></select-car-no>

　　

這里為什么使用中划線的標簽的形式而不是駝峰形式？

去組件ts文件里面會發現

因此我們在頁面上用中划線的形式。

完整插件代碼看這里