angular2.0

Angular2中关于Input与Output的基本用法

2017-10-06  本文已影响25人  我的代码果然有问题

Input 在项目中常用于父组件向子组件传递数据

简单示例:

父组件:定义变量father并赋值给child组件的data属性

father.html

<app-child [data] = "father" ></app-child>

father.component.ts

export class FatherComponent implements OnInit {
    private father: number = 1;
}

子组件: 引入输入属性data;即将父组件传来的数据1保存在data中

export class ChildComponent implements OnInit {  
    @Input()
    data;
}

Output常用于子组件向父组件传递数据,涉及到数据的双向绑定与数据监听(change)的使用。

简单示例:
父组件:定义变量father,绑定change(当change值变化时触发函数)方法

father.html

<app-child (change) = "father = $event"></app-child>

father.component.ts

export class FatherComponent implements OnInit {
    private father: number ;
}

子组件: 添加事件,可动态改变change发送的值

child.html

<button type="button" (click) = "test()" >测试</button>

child.component.ts

export class ChildComponent implements OnInit {  
    @Output()
    change = new EventEmitter() ;
    test() {
        this.change.emit( 1 ) ;
    }
}

点击按钮后会将数值1传入父组件的 father 中。

由于水平有限,许多用语感觉不是很严谨,有错误欢迎指正,谢谢大家。

上一篇 下一篇

猜你喜欢

热点阅读