Angular父组件调用子组件的方法


Posted in Javascript onApril 02, 2018

理解组件

组件是一种特殊的指令,使用更简单的配置项来构建基于组件的应用程序架构

这样他能简单地写app,通过类似的web Component 或者angular2的样式。

web Component 是一个规范。马上就要成为标准。

应用组件的优点:

  • 比普通指令配置还简单
  • 提供更好的默认设置和最好的实践
  • 对基于组建的应用架构更优化。
  • 对angular2的升级更平滑。

不用组建的情况:

  • 对那些在 compile或者pre-link阶段要执行操作的指令,组件不能用,因为无法到达那个阶段。
  • 如果你想定义指令的  priority,terminal,multi-element,也不能用。
  • 组件只能通过元素标签触发,其他的只能用命令。

viewChild装饰器。

父组件的模版和控制器里调用子组件的API。

1、创建一个子组件child1里面只有一个greeting方法供父组件调用。

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-child1',
 templateUrl: './child1.component.html',
 styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
 constructor() { }
 ngOnInit() {
 }
 greeting(name: string) {
 console.log("hello" + name);
 }
}

2、父组件中分别在模版中用模版本地变量调用和在控制器中用ts代码调用。

父组件写2个<app-child>并分别指定模版本地变量

<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>

3,在父组件控制器中声明一个由viewChild装饰器装饰的变量获得子组件的引用。

通过模版变量的名字child1找到相应的子组件并赋值给child1变量,拿到引用就可以调用子组件方法。

@ViewChild('child1')
child1:Child1Component; //父组件中获得子组件的引用
ngOnInit(){
 this.child1.greeting("Tom");
}

Angular父组件调用子组件的方法

4,在父组件模版中调用子组件方法。

在父组件模版中加一个button,点击时去调用子组件child2的greeting方法。

<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>
<button (click)="child2.greeting('Jerry')">调用child2的greeting方法</button>

Angular父组件调用子组件的方法

总结

以上所述是小编给大家介绍的Angular父组件调用子组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
js获取class的所有元素
Mar 28 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 #Javascript
微信小程序block的使用教程
Apr 01 #Javascript
JavaScript动态加载重复绑定问题
Apr 01 #Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 #Javascript
Vue.js进阶知识点总结
Apr 01 #Javascript
vue 指定组件缓存实例详解
Apr 01 #Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 #Javascript
You might like
php下实现农历日历的代码
2007/03/07 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
js读取本地文件的实例
2017/12/22 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
node后端服务保活的实现
2019/11/10 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python工厂函数用法实例分析
2018/05/14 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python datetime包函数简单介绍
2019/08/28 Python
django实现用户注册实例讲解
2019/10/30 Python
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
助人为乐模范事迹材料
2014/06/02 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
树转促学习心得体会
2014/09/10 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
财会专业大学生求职信
2014/09/26 职场文书
人事聘任通知
2015/04/21 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript