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蒙版控件实现代码
Dec 08 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
微信小程序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 过滤页面中的BOM(实现代码)
2013/06/29 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
JavaScript中的this机制
2016/01/30 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
python 除法保留两位小数点的方法
2018/07/16 Python
Python 变量的创建过程详解
2019/09/02 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
演讲主持词
2014/03/18 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书