[Angular 2] Handling Click Events with Subjects
Angular with click Events Handling
2023-09-14 08:59:20 时间
While Angular 2 usually uses event handlers to manage events and RxJS typically uses Observable.fromEvent, a good practice when using Angular 2 and RxJS combined is to use Subjects and push the value through each event so that you can use it as part of your stream.
import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import 'rxjs/add/operator/map'; import {Subject} from 'rxjs/Subject'; @Component({ selector: 'app', template: ` <button (click)="click$.next()">Update</button> <h1>{{clock | async | date: 'yMMMMEEEEdjms'}}</h1> ` }) class App { click$ = new Subject(); public clock; constructor(){ this.clock = this.click$.map( () => new Date()); } } bootstrap(App);
So here create a click$ subject, every time you click the button, it will map to a current date value.
相关文章
- angular debounce throttle「建议收藏」
- Angular 面试题汇总2-Component/Service (Angular v8+)
- uat环境和生产环境的区别_angular 生产环境 相对路径无效
- 解决angular创建项目报错:setTimeout is not defined
- Angular 应用里 index.html 的作用
- Angular Universal Application 应该处理 HTTP POST 请求吗?
- Angular 应用开发里使用 ForRoot 解决 Lazy Loaded Module 里单例行为丢失的问题
- 关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论
- Angular Feature Modules
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Angular 项目路径添加指定的访问前缀
- Angular SSR 应用启动时的一些保护措施
- 使用 Angular HTTP_INTERCEPTOR 拦截器来记录超时请求的一些思考
- Angular 项目中 angular.json builder 字段的可选项介绍
- 关于 Angular 应用部署时的 base-href 参数
- MySQL Error number: 3739; Symbol: ER_SRS_INVALID_ANGULAR_UNIT; SQLSTATE: SR002 报错 故障修复 远程处理
- Web 前端框架:Angular 4.0.0 正式版发布
- 语句掌握Oracle中用WITH语句的利用技巧(oracle的with)
- MySQL查询优化使用WITH子句的限制与替代方案(mysql不能用with)
- Oracle中利用WITH子句的使用(oracle中的with)
- 从Oracle中挖掘洞见坚实的With表(oracle with表)
- angular中使用路由和$location切换视图