Angular rxjs fromEvent使用的一个例子

简介: Angular rxjs fromEvent使用的一个例子

源代码:

import { Component, OnInit } from '@angular/core';
import { JerrySandBoxService } from './jerrySandBoxService';
import { GreetingService } from './greeting.service';
import { fromEvent } from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'sandbox';
    constructor(private jerryService: JerrySandBoxService,
                private englishGreet: GreetingService){
      // this.jerryService.print();
      this.jerryService.print2();
      console.log(this.englishGreet.greet('Jerry'));
  }
  ngOnInit(): void {
    const button = document.querySelector('button');
    fromEvent(button, 'click').subscribe(() => {
      console.log('I am Clicked!');
    });
  }
  jerryTest(){
    console.log('Hello');
  }
}

在html里定义一个button:

image.pngscan 操作符的工作原理与数组的 reduce 类似。它需要一个暴露给回调函数当参数的初始值。每次回调函数运行后的返回值会作为下次回调函数运行时的参数。

相关文章
|
5月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
68 0
|
2月前
|
开发者 开发工具 UED
JSF应用的社交革命:一键解锁社交媒体超级功能,引爆用户参与度的奇迹!
【8月更文挑战第31天】本文探讨了在JavaServer Faces (JSF)应用中集成社交媒体功能的最佳实践,包括选择合适的API和SDK、示例代码及实现细节。通过集成社交媒体,应用能提供即时内容分享、互动交流和个性化体验,提升用户参与度。文章还强调了用户体验优化、安全性及隐私保护的重要性,并总结了社交媒体集成对企业竞争优势的意义。
33 0
|
JavaScript Shell
使用 RxJs 实现一个支持 infinite scroll 的 Angular Component
使用 RxJs 实现一个支持 infinite scroll 的 Angular Component
|
12月前
|
UED
关于 Angular 应用里 Rxjs filter 操作符内的双重感叹号的用法
关于 Angular 应用里 Rxjs filter 操作符内的双重感叹号的用法
|
前端开发 容器
使用 Rxjs 解决 Angular Component 之间的通信问题
使用 Rxjs 解决 Angular Component 之间的通信问题
|
前端开发 API
使用 RxJs Observable 来避免 Angular 应用中的 Promise 使用
使用 RxJs Observable 来避免 Angular 应用中的 Promise 使用
|
JavaScript
使用 RxJS timeout 操作符给 Angular SSR 服务器端渲染模式下的 HTTP 请求添加超时机制
使用 RxJS timeout 操作符给 Angular SSR 服务器端渲染模式下的 HTTP 请求添加超时机制
|
前端开发 JavaScript API
Angular与Rxjs学习
Angular与Rxjs学习
146 0
Angular与Rxjs学习
|
JavaScript
使用 RxJS timeout 操作符给 Angular SSR 服务器端渲染模式下的 HTTP 请求添加超时机制
Angular Universal 是一个开源项目,扩展了 @angular/platform-server 的功能。 该项目使 Angular 中的服务器端渲染成为可能。
155 0
Angular 结合 rxjs 实现拖拽
在上两篇文章中,我们学习了元素中必知重要属性和方法和 Angular 中自定义 Video 操作,没有度过的读者可先了解。那么,现在有这么一个需求,你会怎么实现呢?
Angular 结合 rxjs 实现拖拽
下一篇
无影云桌面