ionic3 组件的封装

• 1.创建组件

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

image.png

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

loding.html

  {{values}}

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 = new EventEmitter;
  constructor(public navCtrl:NavController) { 
  }
   goDetails(item) {
      this.out.emit(item) //将数据传递给父组件
  }
}

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

     image.png

• 4.组件的使用

list.html

  
    list
  





  
  
      

        
{{val}}
      
      

通过自定义属性([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