Angular 组件交互
Angular 组件交互
组件交互: 组件通讯,让两个或多个组件之间共享信息。
使用场景: 当某个功能在多个组件中被使用到时,可以将该特定的功能封装在一个子组件中,在子组件中处理特定的任务或工作流。
交互方式:
- 方式1:通过
@Input
和@Output
装饰器进行交互。 - 方式2:通过
服务
进行交互。
把数据从父组件传到子组件
通过输入型绑定将数据从父组件传到子组件。
输入属性是一个带有@Input装饰器的可设置属性。
当它通过属性绑定的形式被绑定时,值会“流入”这个属性。
部分代码示例如下:
import { Component, Input } from '@angular/core';@Component({selector: 'app-selector',template: `// 模板代码`
})
export class TestComponent {@Input() hero: Hero;@Input('master') masterName: string;
}
上述例子中包含两个输入型属性,第二个@Input为子组件的属性名masterName指定一个别名master。
在父组件中引用子组件,部分代码示例如下:
<app-hero-child *ngFor="let hero of heroes"[hero] = "hero"[master] = "master"></app-hero-child>
监听输入属性值的变化
(1) 使用setter方法
使用一个输入属性的setter()方法,已拦截父组件中值的变化,并采取行动。
部分代码示例如下:
export class TestComponent {@Input()set name(name: String) {// 逻辑处理}
}
(2) 使用ngOnChanges()方法
使用OnChanges生命周期钩子接口的ngOnChanges()方法来监听输入属性值的变化并做出回应。
注: 当需要监视多个、交互式输入属性时,本方法比用属性的setter方法更合适。
在子组件中从@angular/core导入Input、OnChanges和SimpleChange
import { Component, Input, OnChanges, SimpleChange } from '@angular/core';@Component({selector: 'app-version-child',template: `// 模板代码`
})
export class ChildComponent implements OnChanges {@Input() major: number;@Input() minor: number;ngOnChanges(changes: { [propKey: string]: SimpleChange }) {for (let propName in changes) {// propName为输入属性的名字let changedProp = changes[propName]; // changedProp为SimpleChange对象// 其它代码}}
}
SimpleChange类源代码如下:
/*** Represents a basic change from a previous to a new value for a single* property on a directive instance. Passed as a value in a* {@link SimpleChanges} object to the `ngOnChanges` hook.** @see `OnChanges`** @publicApi*/
export declare class SimpleChange {previousValue: any;currentValue: any;firstChange: boolean;constructor(previousValue: any, currentValue: any, firstChange: boolean);/*** Check whether the new value is the first value assigned.*/isFirstChange(): boolean;
}
父组件监听子组件的事件
父组件和子组件通过服务进行通讯
父组件和它的子组件共享同一个服务,利用该服务在组件家族内部实现双向通讯。
该服务实例的作用域被限制在父组件和其子组件内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。
详细文档
详细文档请参考 Angular 组件交互 相关部分内容
Angular 组件交互相关推荐
- angular 指令渲染_Angular 组件交互 ngOnChanges 监听某一属性值变更
我们在实际项目中会拆分各个功能模块,以便页面复用,避免重复工作.那么,这里就涉及到组件之间的交互问题.例如常使用的,输入型数据绑定.setter截听.ngOnChanges()截听以及通过创建引入服务 ...
- Angular组件--动态组件
2019独角兽企业重金招聘Python工程师标准>>> 动态创建组件的应用场景很多,比如动态广告.像浏览器一样动态打开多个页面等等等等 要动态创建组件主要需要用到angular中的C ...
- angular input_快速地上手Angular组件开发
如果我会一些Javascript的基础知识,我可以快速地上手Angular吗?或者说,我是一名前端工作者,没有接触过Angular,我该如何快速地使用Angular进行日常开发呢?我是轻流前端团队的一 ...
- vue父组件、子组件,父子组件交互
Vue父组件调用子组件事件,父子组件交互 vue2 vue父组件向子组件传递数据 or 调用事件 父组件传递数据到子组件 props 传递: <child-c :args="args& ...
- Angular Elements,四步将Angular 组件转换为 web 组件
Angular Elements,四步将Angular 组件转换为 web 组件 从Angular版本6开始,我们可以将Angular组件公开为Web组件,或者更确切地说:作为自定义元素,它是Web组 ...
- pb怎么封装com组件_从零开始构建 Angular 组件库
NG-ZORRO 组件库官网地址:Ant Design Of Angular Github地址:NG-ZORRO/ng-zorro-antd 更新:视频已上传 谢亚东演讲视频_腾讯视频v.qq.co ...
- SONiC架构DOCKER组件交互分析
BGP组件交互分析 内核中的bgp socket收到BGP更新报文,然后被上送到bgpd进程 bgpd处理该报文,并通知zebra进程新增前缀和关联下一跳 zebra确定该目的可达后,生成一个路由网络 ...
- 使用NG-ZORRO(Angular 组件库)中Table组件,通过columnTable属性固定列,结果每行数据内容穿透了两遍的固定列;鼠标滑过该条数据时,两侧固定列的背景色不跟着改变~
[问题] 使用NG-ZORRO(Angular 组件库)中Table组件,通过#columnTable属性固定列,结果每行数据内容穿透了两遍的固定列(因为是刚开始做这个项目,所以盲猜是之前某位同仁搞个 ...
- Angular 组件接口之 ControlValueAccessor
ControlValueAccessor 是什么? 简单来说ControlValueAccessor是一个接口,它被用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建 ...
最新文章
- 0基础学python难吗-0基础学Python有多难?该怎么入门?
- 7-2一元多项式的乘法与加法运算
- StaticLinkList
- mybatis教程--查询缓存(一级缓存二级缓存和整合ehcache)
- 微信小程序 rpx和px转换
- 重磅!这个 GitHub 汇总了 300 道 Python 面试题!
- 你的代码是否按照高内聚、低耦合的原则来设计的?
- 【C++基础学习】const限定修饰符详解
- PHPEXCEL实例
- python api调用 验证码_Python调用创蓝253短信验证码API文档
- epub 阅读器_全球与中国EPUB阅读器市场深度调研分析报告
- Android给scrollView截图超过屏幕大小形成长图
- CSS color设置与调色板
- 关于 签名验证失败 的问题
- 虚拟机安装XP操作系统
- AMS分析 -- 启动过程
- 解决vscode下载慢的问题
- Java基础寒假作业-个人所得税计算系统
- 用html5制作闹钟,HTM5制作的闹钟
- 非典型文字描边效果的实现方法