Angular父子组件传值及方法调用
Angular 父子组件传值及方法调用
1.子组件接收父组件的数据及调用父组件的方法
方法1:通过Input接收父组件的数据或方法
(1)在子组件中导入Input:
import { Input } from ‘@angular/core’;
(2)子组件类中通过@Input装饰器接受输入数据或方法,并赋值给子组件的属性
(3)子组件引用是通过属性传值,属性名要和组件类中的属性名一致
(4)通过步骤(2)中的属性,即可获得父组件传递的数据或通过属性名+()即可调用父组件的方法
方法2:通过Input接收父组件,直接调用父组件的属性及方法
这个方法和方法1类似,区别是:在引用子组件是,把父组件通过"this"关键字整个传递给子组件,在子组件中就可以直接调用父组件的属性和方法。
2.父组件接收子组件的数据及调用子组件的方法
方法1:通过ViewChild获取子组件,直接调用子组件的数据及方法
(1)子组件引用是给子组件新增ID属性:#idName
(2)父组件类中引入ViewChild:import { ViewChild } from ‘@angular/core’;
(3)父组件勒种通过@ViewChild(‘idName’)装饰器接受子组件并赋值给自己的属性
(4)通过(3)中获取的属性获取子组件的数据或调用子组件的方法
方法2:dom加载完成后,通过document.elementById获取子组件,获取子组件的数据、调用子组件的方法
(1)父组件类需要在ngAfterViewInit()方法中,通过document.getElementById(‘idName’)获取子组件
(2)调用子组件的属性和方法
方法3:子组件通过EventEmitter发射数据,父组件通过()和$event接收子组件发射的数据
(1)子组件中导入EventEmitter、Output:import { EventEmitter ,Output } from ‘@angular/core’;
(2)子组件中定义属性为输出类型,并设置为EventEmitter类型:@Output() private out = new EventEmitter();
(3)输出属性通过emit()方法发射数据:this.out.emit(‘msg’);
(4)子组件调用中接收子组件发射的数据,并传递通过$event传递给父组件的方法:(out)=“fatherMethod($event)”
示例代码: 代码
- Vue ---父子组件之间互相传值与方法调用
- Angular父子组件通过服务传参的示例方法
- 微信小程序——父子组件传参以及方法的调用
- Vue父子组件互相调用方法
- Angular 4 父组件调用子组件中的方法
- IFrame父子组件之间相互调用方法
- Angular父组件调用子组件的方法
- windows服务调用word组件出错的解决方法
- vue 父组件调用子组件方法
- 小程序调用自定义组件里的方法
- flutter 实时获取文本框值 (TextField:设置默认值,TextFormField:通过组件key调用和获取组件方法属性)
- 巧妙运用v-model实现父子组件传值的方法示例
- angular2父子组件的数据传递,父组件向子组件传递数据
- Angular directive父子组件之间通讯
- layer弹出层父子页面事件相互调用方法
- Iframe嵌套 父子窗口互相调用方法
- vue中子组件调用兄弟组件方法
- angular 用Observable实现异步调用的方法
- Angular使用动态加载组件方法实现Dialog的示例