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：

点击之后，看到输出：

可以改得更高级一些：

  ngOnInit(): void {const button = document.querySelector('button');fromEvent(button, 'click').pipe(scan(count => count + 1, 0)).subscribe(count => console.log(`Clicked ${count} times`));}

测试输出：

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

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular rxjs fromEvent使用的一个例子相关推荐

Angular应用的router-outlet使用一个例子
项目地址:https://angular-jerry-empty-store.stackblitz.io TopBar Component里,使用Angular routerLink指令设置了一个路由 ...
rxjs 操作符 pairwise 的一个例子
Groups pairs of consecutive emissions together and emits them as an array of two values. pairwise 将连 ...
Angular 自定义 structural 指令的一个例子
The <ng-container> is a syntax element recognized by the Angular parser. It's not a directive, ...
Angular元素属性绑定的一个例子
如下图的例子:a标签的disabled class绑定到model.active属性的取反值,即如果model.active为false,该标签就为disabled状态. 这个a标签页默认是disab ...
Angular list列表绑定的一个例子
新建一个hero数组作为测试数据: import { Hero } from './heroes/hero';export const HEROES: Hero[] = [{ id: 11, name ...
SAP Spartacus 中，Angular ＜ng-container＞使用的一个例子
Angular官网里对ng-container的介绍: The Angular is a grouping element that doesn't interfere with styles or ...
Angular component的一个例子
官网:https://angular.io/guide/architecture-components Before a view is displayed, Angular evaluates th ...
通过rxjs的一个例子, 来学习SwitchMap的使用方法
switchMap相关文章 rxjs里switchMap operators的用法通过rxjs的一个例子, 来学习SwitchMap的使用方法 rxjs switchMap的实现原理 rxjs的ma ...
Webpack入门——使用Webpack打包Angular项目的一个例子
(一)什么是Webpack Webpack是一个前端的模块管理工具(module bundler),以下是webpack的官网:http://webpack.github.io/,一进入官网可以看到下 ...

Angular rxjs fromEvent使用的一个例子

Angular rxjs fromEvent使用的一个例子相关推荐

最新文章

热门文章