ionic3自定义组件以及组件间的双向通信

1、在一个项目下创建一个页面Test1Page：ionic g page test1
2、创建一个组件commen：ionic g component commen，我们在Test1Page页面中引入组件commen，创建完成后目录如图：

3、在commen.html中，代码如下：

<div>
  <div [ngClass]="{'checkbox': true, 'is-over': inpData}" (click)='checkCli()'>
    <div class="is-checked" *ngIf='isChecked'>
      <div class="circle"></div>
    </div>
  </div>
</div>

commen.scss中代码：

commen {
    $overColor: #EF93AD;
    .checkbox{
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        position: relative;
        .is-checked{
            position: absolute;
            top: 5px;
            left: 5px;
            width: 10px;
            height: 10px;
            background: #000;
            border-radius: 50%;
        }
    }
    .is-over{
        border-color: $overColor;
        background: $overColor;
    }
}

commen.ts中：

import { Component, Input, Output, EventEmitter } from '@angular/core';

/**
 * Generated class for the CommenComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'commen',
  templateUrl: 'commen.html'
})
export class CommenComponent {
  @Input() inpData: any; //父组件传入的值
  @Output() outEvent: EventEmitter<any> = new EventEmitter; //子组件对父组件的通信的值
  isChecked: boolean;
  constructor() {
    console.log('Hello CommenComponent Component');
  }
  checkCli(){
    this.isChecked = !this.isChecked;
    this.outEvent.emit(this.isChecked);
  }
}

在app.module.ts中引入组件木块:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { Test1Page } from '../pages/test1/test1';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { ComponentsModule } from '../components/components.module';   //组件模块在这里

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    Test1Page,
  ],
  imports: [
    ComponentsModule,  //组件模块在这里
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    Test1Page,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

在使用的页面Test1Page,test1.html中：

<ion-header>
  <ion-navbar>
    <ion-title>test1</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <div class="normal-page">
        <commen [inpData]='val' (outEvent)='test1Event($event)'></commen>
    </div>


    <button ion-button (click)='toChildValue()'>传值给子组件</button>
</ion-content>

test1.ts中：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the Test1Page page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-test1',
  templateUrl: 'test1.html',
})
export class Test1Page {
  val: any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.val = false;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Test1Page');
  }
  test1Event(e){
    console.log('子组件的点击事件传过来的值',e);
  }
  toChildValue(){
    this.val = !this.val;
    console.log('当前页面的点击事件改变子组件的值');
  }
}

test1.module.ts中：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Test1Page } from './test1';
import { ComponentsModule } from '../../components/components.module';

@NgModule({
  declarations: [
    Test1Page,
  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(Test1Page),
  ],
})
export class Test1PageModule {}

4、当写完这些代码后，我们重启ionic服务，会发现报错,报错如下：

compiler.js:486 Uncaught Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'div'. ("<!-- Generated template for the CommenComponent component -->
<div>
  <div [ERROR ->][ngClass]="{'checkbox': true, 'is-over': inpData}" (click)='checkCli()'>
    <div class="is-checked" "): ng:///ComponentsModule/CommenComponent.html@2:7
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("ngClass]="{'checkbox': true, 'is-over': inpData}" (click)='checkCli()'>
    <div class="is-checked" [ERROR ->]*ngIf='isChecked'>
      <div class="circle"></div>
    </div>
"): ng:///ComponentsModule/CommenComponent.html@3:28
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
<div>
  <div [ngClass]="{'checkbox': true, 'is-over': inpData}" (click)='checkCli()'>
    [ERROR ->]<div class="is-checked" *ngIf='isChecked'>
      <div class="circle"></div>
    </div>
"): ng:///ComponentsModule/CommenComponent.html@3:4
    at syntaxError (compiler.js:486)
    at TemplateParser.parse (compiler.js:24674)
    at JitCompiler._parseTemplate (compiler.js:34629)
    at JitCompiler._compileTemplate (compiler.js:34604)
    at compiler.js:34505
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34505)
    at compiler.js:34375
    at Object.then (compiler.js:475)
    at JitCompiler._compileModuleAndComponents (compiler.js:34374)

这是因为我们在组件中使用了*ngIf等指令，当使用这个的时候需要在Module.ts中引入CommonModule

components.module.ts文件代码如下：

import { NgModule } from '@angular/core';
import { CommenComponent } from './commen/commen';
import { CommonModule } from '@angular/common'; //引入angular模块CommonModule
@NgModule({
	declarations: [CommenComponent],
	imports: [CommonModule], //引入angular模块CommonModule
	exports: [CommenComponent]
})
export class ComponentsModule {}

最后我们重启ionic serve，发现封装的组件可以正常使用了，如图：

当点击的时候组件之间的通信也能正常通信。
源码demo在码云，链接: https://gitee.com/weijunw/ionic3Demo/tree/master/demo