Angular2父子组件之间数据传递:局部变量获取子组件

通过@Input和@Output可以实现数据之间的传递,但是无法获取子组件的类属性和类方法,接下来我们通过局部变量方式实现获取子组件其他成员


第一步:定义子组件:

ChildenComponent.ts(子组件)

import {Component} from '@angular/core';

@Component({
selector: 'app-childen',
 templateUrl: './childen.component.html',
 styleUrls: ['./childen.component.css']
})
export class ChildenComponent {

fun1() {
alert('子组件方法');
 }

}

(1).子组件中之定义了一个fun1()方法,提供给父组件调用


第二步:定义父组件
ParentComponent.ts(父组件)

import {Component} from '@angular/core';

@Component({
selector: 'app-parent',
 templateUrl: './parent.component.html',
 styleUrls: ['./parent.component.css']
})

export class ParentComponent {

}

ParentComponent.html

<div class="parent_div">
 <p>父组件</p>
 <div>
   <input type="button" value="调用子组件方法" (click)="chiden.fun1()">
 </div>
 <!---子组件指令 start-->
 <app-childen #chiden></app-childen>
 <!---子组件指令 end-->
</div>

通过#号来标识一个变量, 这样在父组件模板中创建了一个局部变量#chiden来获取子组件的实例,调用子组件中的方法和属性。上面例子中我们定义了#chiden之后,绑定点击就可以调用子组件的方法了


看看效果:点击按钮,弹出子组件方法的alert('子组件方法'); 






个人学习心得,大神路过 ,不喜勿喷
有问题加我微信提问或者留言

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值