父传子:@Input
子传父:@OutputEventEmitter
父调用子方法:@viewChild
一、父传子
ionic版本不同,父传子的方法有稍微不同,传值和接收的方法有所改变
1、首先在子组件中引入依赖
import {Input} from '@angular/core';
2、父组件:(ionic2)
<tab-bar activeIndex="2" #tabbar></tab-bar>
父组件:(ionic3+)
<tab-bar [activeIndex]="2" #tabbar></tab-bar>
3、子组件:(ionic2)
@Input('activeIndex') activeIndex: any
子组件:(ionic3+)
@Input() activeIndex: any
二、子传父
1、子组件
子组件引入依赖
import {Output, EventEmitter} from '@angular/core';
使用output定义传输的方法
@Output() event:EventEmitter<Object> = new EventEmitter<Object>()
通过事件触发父组件方法去传值
this.event.emit(this.text)
2、父组件
//father.html
<tab-bar activeIndex="2" (event)="father('$event')"></tab-bar>
//father.ts
father(event){
consle.log(event) //这里event就是子组件传过来的值
}
这里$不能省略,子组件的event名字对应父组件的(event)
三、父组件调用子组件方法
//父组件 father.html
<tab-bar activeIndex="2" #tabbar></tab-bar>
father.js
import { ViewChild } from "@angular/core";
import { TabBarComponent } from '../../../components/tab-bar/tab-bar'
@ViewChild("tabbar")
tabbar:TabBarComponent
something(){
this.tabbar.greet('Free')
}
//子组件
greet(name){
alert(name+',你好')
}