ionic3 组件的封装

• 1.创建组件

执行 ionic g component loding (组件名),等待创建成功后，目录如下：

image.png

• 2.组件之间通过@Input和@Output来进行交互的；
  @Input:父组件通过@Input将数据传递给子组件 需要加载Input模块
  @Output：子组件通过@Output将数据传递给父组件，需要加载Output和EventEmitter模块

loding.html

<div tappable (click)='goDetails(12)'>
  {{values}}
</div>

loding.ts

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

@Component({
  selector: 'loding',
  templateUrl: 'loding.html'
})
export class LodingComponent {
  @Input()values:any; //获取从父组件传递过来的数据
  @Output() out:EventEmitter<any> = new EventEmitter;
  constructor(public navCtrl:NavController) { 
  }
   goDetails(item) {
      this.out.emit(item) //将数据传递给父组件
  }
}

• 3. 组件的引用，比如我在list这个Page中使用在list.module.ts引入组件
     image.png

• 4.组件的使用

list.html

<ion-header>

  <ion-navbar>
    <ion-title>list</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding >
  <loding [values]='val' (out)='outpust($event)'></loding>
  
      <div class="custom-spinner-container">
        <div class="custom-spinner-box">{{val}}</div>
      </div>
      
</ion-content>

通过自定义属性([values]='val')把数据传给子组件，父组件通过自定义事件((out)='outpust($event)')获取子组件传过来的值

list.ts

import { AppService } from './../../app/app.service';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-list',
  templateUrl: 'list.html',
})
export class ListPage {
   val:string='nishuoshenm'
  constructor(public navCtrl: NavController, public navParams: NavParams,public appSer:AppService) {
    
  } 

  ionViewDidLoad() {
    console.log('ionViewDidLoad ListPage');
    // this.appSer.loding()
    
  }
  outpust(res){
    console.log(res)
  }

}

• 注意：

  
  image.png