Angular2组件间的数据传递,这几种姿势你知道吗(三)

2020 年 1 月 07 日

Angular2组件间的数据传递,这几种姿势你知道吗(三)

父组件通过局部变量获取子组件引用


子组件定义需要传递到父元素的方法 fn


//content.component.tsimport { Component } from '@angular/core';@Component({ selector: 'content', templateUrl: './content.component.html', styleUrls: ['./content.component.css']})export class ContentComponent { title = 'content'; fn(){   alert('子组件方法') }}
复制代码


父组件(示例请查看上面的 app.component.html 和 app.component.ts)


父组件通过 #号来标识一个变量, 这样在父组件模板中创建了一个局部变量 #children 来获取子组件的实例,调用子组件中的方法和属性。上面例子中我们定义了 #children 之后,绑定点击就可以调用子组件的方法 fn 了,这种方式可以想象父组件在子组件上装了一个探测仪,就探测到子组件数据变化。


这种通过在子组件模版上设置局部变量的方式获取子组件的成员变量,但是有一个限制,必须在父组件的模版中设置局部变量才能够获取到子组件成员。


父组件通过使用 @ViewChild 获取子组件引用


子组件(示例请查看上面 content.component.ts)


与局部变量方法相同,在子组件中定义一个 fn 方法


父组件(示例请查看上面的 app.component.html 和 app.component.ts)


父组件中使用 @ViewChild(ContentComponent) child:ContentComponent;获取子组件 content 的组件实例并赋值给 child,这样就把子组件实例保存到父组件的 child 中,这样父组件就可以在 child 中取到子组件的属性和方法了,同样你也可以设置 ViewChild 的参数为字符串的方式实现,这和绑定模板局部变量是一样的,这里就不多做介绍了。


总的来说,angular 组件间的数据传递方式比较多,这里只是结合学习过程,逐步了解一下一些比较粗浅的组件间数据传递的方式,希望能在您学习 angular2 的过程中,对您有所帮助。


本转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/QBYWSVi0DDKKNf1GLC5sTw


2020 年 1 月 07 日 17:5558

评论

发布
暂无评论
发现更多内容

rockchip的yocto编译环境搭建

良知犹存

Linux yocto rockchip

一家估值20亿美元的公司,竟然没有办公室?

Atlassian速递

远程办公 Atlassian Jira

架构师训练营第十一周作业

Melo

Docker 安装及配置镜像加速

哈喽沃德先生

Docker 容器 微服务 容器技术 容器化

架构师训练营 - 第 8 周学习总结

红了哟

ARTS打卡Week 11

teoking

6. 二十不惑,ObjectMapper使用也不再迷惑

YourBatman

json Jackson ObjectMapper

看智微智能互动录播系统如何建设“三个课堂”

InfoQ_967a83c6d0d7

ARTS打卡 第13周

引花眠

微服务 ARTS 打卡计划

【Elasticsearch 技术分享】—— ES 常用名词及结构

程序员小航

Java 搜索引擎 elastic ES Lucene Elastic Search

要刷LeetCode了,才发现自己连时间复杂度都不懂

海星

算法 LeetCode

我与游戏相伴【自我访谈2】

叶阳夏烟

系列 游戏 访谈录 剧情游戏 仙剑奇侠传

大数据技术思想入门(三):分布式文件存储的流程

抖码算法

Java 大数据 hadoop 分布式

想不出来问题的你

escray

学习 面试 面试现场

utf8字符集下的比较规则

Simon

MySQL 字符集

disruptor 高性能队列最佳选择

柿子

队列 disruptoer 高性能队列

速看!今天我才知道,UUID还分五个版本

麦叔

Java uuid

Python代码调试指南

王坤祥

Python Python基础

Newbe.Claptrap 框架入门,第三步 —— 定义 Claptrap,管理商品库存

newbe36524

Docker 云计算 微服务 .net core ASP.NET Core

从Vessel到二代裸金属容器,云原生的新一波技术浪潮涌向何处?

华为云开发者社区

Docker 容器 云原生 k8s Vessel

MacOS抓包工具Charles

叉叉敌

ios charles 抓包

1.Flink任务之间通信开销-6

小知识点

scala 大数据 flink

想问面试官什么问题么?

escray

学习 面试 面试现场

“深化产教融合·共育数字人才”全国产教融合信息化高峰论坛·江苏站成功举办

InfoQ_967a83c6d0d7

Java ForEach语句判断是否为空

引花眠

bug

顺时针遍历矩阵,提高系统高并发350倍,React Native原理浅析 组件设计原则 安全架构 防火墙ModSecurity John 易筋 ARTS 打卡 Week 14

John(易筋)

ARTS 打卡计划 组件设计原则 React Native 高并发优化

浅谈 GET 和 POST 区别

叉叉敌

面试题 post GET

关于Aborted connection告警日志的分析

Simon

MySQL MySQL错误日志

Java中的一些限制

xiaoxi666

ARTS打卡(20.08.17-20.08.23)

小王同学

你期待的薪酬是多少?

escray

学习 面试 面试现场

Angular2组件间的数据传递,这几种姿势你知道吗(三)-InfoQ