Angular子父组件之间的值传递详解

本文详细介绍了在Angular框架中,如何实现父组件向子组件传递数据,以及子组件如何通过事件机制向父组件传递数据。主要涉及@Input装饰器、ViewChild装饰器和EventEmitter的使用。
摘要由CSDN通过智能技术生成

子组件获得父组件的数据

从两个方向来详解这个操作,以父组件中有一个msg传入子组件中形成一个标题元素为例。

对于子组件:

1.需要引入Input

import { Component, OnInit,Input } from '@angular/core';

2.定义这个传入的msg

@Input() message:any;

3,关于显示问题,子组件和父组件都有对应的html文件,此时子组件的html应当是展示出这个数据

<p>{{message}}</p>
对于父组件:

1.也需要定义这个传出到子组件的参数

msg = "父组件传入给子组件的值"

2.父组件的html修改如下

<app-testmodule [message]="msg" ></app-testmodule>

左边中括号内message相当于在子组件中定义的message,这里是把右边父组件中msg的值绑定给了子组件,这个步骤是子父组件传值的桥梁。

父组件获得子组件的数据

1,通过ViewChild

对于父组件:

只需要调用ViewChild 连接子组件

@ViewChild("组件名字") child : any;

假设有一个子组件方法为run()或者子组件数据为value,使用如下方法调用

this.组件名字.run();
this.组件名字.value;
对于子组件 :

需要在子组件中定义好上述值和方法,然后再父组件的html中定义好自己的id

2,通过Output和EventEmitter

对于子组件:

需要引入output和EventEmitter,随后定义这个驱动事件EventEmitter

@Output outer = new EventEmitter();

然后定义一个方法传递这个

send(){this.outer.emit(“数据”);}
对于父组件:

只需要在引入子组件模块的时候作如下定义

<app-child #child  (outer)="run($event)"></app-child>//父组件中的run方法
run(e){
	console(e);
}
//这里父组件通过这个outer连接到子组件,然后接收了传递过来的值"数据",随后把这个打印在了控制台
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值