[Angular 2] @Input & @Output Event with ref
2023-09-14 08:59:19 时间
The application is simple, to build a color picker:
When click the rect box, it will check the color value below and title color will also change.
color-picker.ts:
import {Component, Output, EventEmitter, Input} from "@angular/core"; import {RED, BLUE} from './constants'; @Component({ selector: 'color-picker', moduleId: module.id, templateUrl: 'color-picker.component.html' }) export class ColorPicker{ @Input() color:string; @Output('selectedColor') colorOut = new EventEmitter(); red = RED; blue = BLUE; choose(color){ this.colorOut.emit(color); } }
color-picker.component.html:
<div class="color-title" [ngStyle]="{color:color}">Pick a Color, plz:</div> <div class="color-picker"> <div class="color-sample color-sample-blue" (click)="choose(red)"></div> <div class="color-sample color-sample-red" (click)="choose(blue)"></div> </div>
So the logic is we will take a color input, it is used in title styling:
<div class="color-title" [ngStyle]="{color:color}">Pick a Color, plz:</div>
When we click on one rect box, fire choose() function, it will output a event named "selectedColor":
@Output('selectedColor') colorOut = new EventEmitter(); choose(color){ this.colorOut.emit(color); }
If we don't give name 'selectorColor', it will used 'colorOut' as name.
In app.ts, it is used:
<color-picker #picker [color]="picker.color" (selectedColor)="picker.color = $event">
</color-picker>
{{picker.color}}
Here we use reference:
#picker
And we assign the color back from output event to picker.color, this picker.color then will be used as input to color-pick to change the title color.
The benfits to use reference is avoid assign a local variable.
相关文章
- 微服务(十一)——Config分布式配置中心&Bus消息总线
- Garadle 插件扩展属性&源集SourceSets
- 流媒体视频基础 MSE 入门 & FFmpeg 制作视频预览缩略图和 fmp4
- 研发效能生态完整图谱&DevOps工具选型必看
- 00SEC-D&D数据泄露报警日报【第16期】
- GoLang17 - Go 语言递归函数&类型转换
- KDD'22推荐系统论文梳理 (24篇研究&36篇应用论文)
- AI写代码修Bug画画写诗,ChatGPT&DALLE2试用攻略
- 跟着Nature Ecology&Evolution学作图:R语言ggmsa包展示多序列比对结果
- 【链表习题集1】整体和局部反转链表&同频和快慢指针&合并链表
- 因果推断&计算机网络、体系结构与代码生成 | 犀牛鸟精英人才计划课题宣讲会第七场
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- hctf2016 简单部分WEB && misc writeup
- matlab绘图(六)-图像光滑&数据取点
- 【C++修炼之路】12. stack && queue类
- Angular 项目中 angular.json builder 字段的可选项介绍
- <meta>正则
- Linux下APACHE&PHP&MYSQL&CGI修改版