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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
浅谈react useEffect闭包的坑
Jun 08 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 URL编码解码函数代码
2009/03/10 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
javascript 节点遍历函数
2010/03/28 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python tkinter canvas使用实例
2019/11/04 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
人事主管的岗位职责
2013/11/16 职场文书
大学在校生求职信范文
2013/11/21 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
供货协议书
2014/04/22 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
贪污检举信范文
2015/03/02 职场文书
2015年酒店工作总结
2015/04/28 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
党支部半年考察意见
2015/06/01 职场文书
校园运动会广播稿
2015/08/19 职场文书