angular 子组件调用父组件方法
1、父组件和子组件:接触过面向对象编程的开发者肯定不会对父子关系陌生,在Angular 2中子组件存在于父组件“体内”,并且父子组件可以通过一些渠道进行通讯。
2、父组件向子组件传入数据 :当我们着手开始开发一个组件时,第一件想到的应该就是为其传入数据,毕竟我们期望组件为我们处理某些工作通常就需要给其提供给养。
3、Angular 2中子组件使用装饰器@Input接收父组件传入的数据:// child-component.tsimport { OnInit, Component, Input } from '@angular/core';
4、可以看到,我们使用装饰器@Input修饰了count属性,这就意味着child-component被使用时期望收到一个名为count的属性,当然不属于自己掌控的范围内要小心。
5、别人使用我们的组件时什么续异收俱情况都可能出现,所以我们为count设置了一个初始值,当父组件没有给我们的count舛匀砖察属性传值时,我们就取此初始值。父组件使用child-component时,为count属性赋予初始值initialCount,即5,也就是说此时ChildComponent的ngOnInit方法中会打印出5。
6、注意[count]语法标识了数据流向:父组件流入子组件,即单向数据绑定。此时如果传入的数据是基本数据类型,子耘资诡拨组件中对数组做任何操作都不会影响到父组件,但如果传入的不是基本数据类型,而是引用数据类型,则要格外注意子组件中对数据的操作可能会对父组件产生影响。
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。