ionic弹窗

从父组件里打开一个子组件，并且传入值显示，有两种方法：

1、ModalController

引入
import { ModalController} from 'ionic-angular';

  constructor(
    public modalCtrl: ModalController,
  }
//方法
  open(){
    let code = this.code;
    let modal = this.modalCtrl.create(childCompontent, {
      Code: code
    }, {
        cssClass: ""
      });
      modal.onDidDismiss((data) => {  
//关闭弹出层返回某页面时候刷新
        if (data.isSuccess) {
          this.navCtrl.push(........);
        }
      })
    modal.present();
  }
}

子页面

//用isSuccess控制页面关闭之后要不要更新数据
this.viewCtrl.dismiss({isSuccess:true});
 this.viewCtrl.dismiss({isSuccess:false});

2、做一个子组件

有遮罩层有窗口

@Component({
  selector: 'name-selector',
  templateUrl: 'name-selector.component.html'
})

• 父组件引入
  html

  <!--弹出层-->
<name-selector #nameSelector [hidden]="!isShow" 
(onClose)="close($event)"></name-selector>

ts

@ViewChild('nameSelector') nameSelector: selectorComponent;

//方法传值
  doShow() {
    var data = {
  。。。。。。。。
    }
    this.nameSelector.productData = data;
    this.isShow = true;
  }
}

• 子组件接收

//处理传入的数据
  @Output() onClose = new EventEmitter<any>();
  @Input() set productData(productData: any) {
    if (productData) {
      。。。。。。。
    }
  }
 /*
   关闭遮挡层和弹出框
 */
  closePop(val?: any) {
    // this.isShow = false;
    // this.destroy();
    this.onClose.emit(val);
    
  }