- 测试代码：fromEvent(this.test, 'click').pipe(map( event => event.timeStamp), mapTo(1)).subscribe((event) => console.log(event));pipe 操作的两个输入操作：输入参数为数组，包含两个元素：使用原始的 Observable 作为输入，执行这两个操作：数组的 reduce 是一个... 测试代码：fromEvent(this.test, 'click').pipe(map( event => event.timeStamp), mapTo(1)).subscribe((event) => console.log(event));pipe 操作的两个输入操作：输入参数为数组，包含两个元素：使用原始的 Observable 作为输入，执行这两个操作：数组的 reduce 是一个...
- 使用一个例子来研究 map 操作符的工作原理。推荐阅读本文之前，先浏览这篇文章RxJs fromEvent 工作原理分析以了解相关知识。源代码：import { Component, OnInit, Inject } from '@angular/core';import { fromEvent, combineLatest } from 'rxjs';import { mapTo, sta... 使用一个例子来研究 map 操作符的工作原理。推荐阅读本文之前，先浏览这篇文章RxJs fromEvent 工作原理分析以了解相关知识。源代码：import { Component, OnInit, Inject } from '@angular/core';import { fromEvent, combineLatest } from 'rxjs';import { mapTo, sta...
- fromEvent(this.test, 'click').subscribe((event) => console.log(event));this.test 的赋值逻辑：this.test = this.document.getElementById('test');每当该 id 为 test 的按钮被点击一次，则 fromEvent issue 一个新的值，内容为 MouseClick... fromEvent(this.test, 'click').subscribe((event) => console.log(event));this.test 的赋值逻辑：this.test = this.document.getElementById('test');每当该 id 为 test 的按钮被点击一次，则 fromEvent issue 一个新的值，内容为 MouseClick...
- 在 window-ref.ts 的实现里，定义了一个每隔 300 毫秒，通过 fromEvent 发射一个 resize event 的Observable：/** * Returns an observable for the window resize event and emits an event * every 300ms in case of resizing. An e... 在 window-ref.ts 的实现里，定义了一个每隔 300 毫秒，通过 fromEvent 发射一个 resize event 的Observable：/** * Returns an observable for the window resize event and emits an event * every 300ms in case of resizing. An e...
- 看下列这段出现在 Angular Component 内的代码：protected userCostCenters$: Observable<CostCenter[]> = this.userCostCenterService .getActiveCostCenters() .pipe(filter((costCenters) => !!costCenters));... 看下列这段出现在 Angular Component 内的代码：protected userCostCenters$: Observable<CostCenter[]> = this.userCostCenterService .getActiveCostCenters() .pipe(filter((costCenters) => !!costCenters));...
- 在 RxJS 中，tap 操作符是一种用于在 Observable 流中插入额外的副作用操作的工具。它允许我们在数据流中进行调试、记录日志、执行辅助操作等，而不会改变原始的 Observable 数据流。tap 操作符接收一个回调函数，该函数会在每个值通过 Observable 时被调用。tap 操作符的使用场景有很多，本文介绍一些常见的应用示例：调试和日志记录：import { tap }... 在 RxJS 中，tap 操作符是一种用于在 Observable 流中插入额外的副作用操作的工具。它允许我们在数据流中进行调试、记录日志、执行辅助操作等，而不会改变原始的 Observable 数据流。tap 操作符接收一个回调函数，该函数会在每个值通过 Observable 时被调用。tap 操作符的使用场景有很多，本文介绍一些常见的应用示例：调试和日志记录：import { tap }...
- Content Security Policy 是一种使用标题或 meta 元素来限制或批准加载到指定网站上的内容的策略。 这是一个广受支持的安全标准，所有网站运营者都应该对这些标准了然于心。 使用 CSP 通过说明允许或不允许的规则为 Web 网站增加了一层保护。 这些规则有助于防御内容注入和跨站点脚本 (XSS) 攻击，这是 OWASP 的十大 Web 应用程序安全风险中的两个。 Content Security Policy 是一种使用标题或 meta 元素来限制或批准加载到指定网站上的内容的策略。 这是一个广受支持的安全标准，所有网站运营者都应该对这些标准了然于心。 使用 CSP 通过说明允许或不允许的规则为 Web 网站增加了一层保护。 这些规则有助于防御内容注入和跨站点脚本 (XSS) 攻击，这是 OWASP 的十大 Web 应用程序安全风险中的两个。
- Observables 顾名思义，是可以被观察的事务。在 Rxjs 的上下文里，Observable 会随着时间的推移，在某个时间点产生数据。 Observables 顾名思义，是可以被观察的事务。在 Rxjs 的上下文里，Observable 会随着时间的推移，在某个时间点产生数据。
- 本文介绍笔者在实际 Angular 开发项目中对 Rxjs 里 mergeMap 这个 Operator 的使用经验分享。注意：flatMap 是 mergeMap 的别名。如果一次只能激活一个内部订阅，请使用 switchMap.如果内部 observables 的发射和订阅顺序很重要，请使用 concatMap.当需要展平内部 observable 但想要手动控制内部订阅的数量时，是 m... 本文介绍笔者在实际 Angular 开发项目中对 Rxjs 里 mergeMap 这个 Operator 的使用经验分享。注意：flatMap 是 mergeMap 的别名。如果一次只能激活一个内部订阅，请使用 switchMap.如果内部 observables 的发射和订阅顺序很重要，请使用 concatMap.当需要展平内部 observable 但想要手动控制内部订阅的数量时，是 m...
- 一个具体的例子：combineLatest([ data$.pipe(startWith(null)), loading$,]).pipe( takeWhile(([data, loading]) => !data || loading, true), map(([data, loading]) => loading ? null : data), skip(1), distin... 一个具体的例子：combineLatest([ data$.pipe(startWith(null)), loading$,]).pipe( takeWhile(([data, loading]) => !data || loading, true), map(([data, loading]) => loading ? null : data), skip(1), distin...
- 首先看看我这个支持 infinite scroll 的 Angular 应用的运行时效果：https://jerry-infinite-scroller.stackblitz.io/滚动鼠标中键，向下滚动，可以触发 list 不断向后台发起请求，加载新的数据：下面是具体的开发步骤。(1) app.component.html 的源代码：<div> <h2>{{ title }}</h2> ... 首先看看我这个支持 infinite scroll 的 Angular 应用的运行时效果：https://jerry-infinite-scroller.stackblitz.io/滚动鼠标中键，向下滚动，可以触发 list 不断向后台发起请求，加载新的数据：下面是具体的开发步骤。(1) app.component.html 的源代码：<div> <h2>{{ title }}</h2> ...
- 之前有读者看了我文章里代码截图之后，给我留言，Jerry，你为什么不用等宽字体呢？确实，我对编程等宽字体没有什么研究，感谢这位读者对我文章细心的阅读。网上做了一番功课，最后我选择了 Cascadia Code 这款等宽字体。看一下效果。图1和图2 分别是在 Visual Studio Code 里的非等宽字体和等宽字体 Cascadia Code，可见等宽字体确实能治疗程序员的强迫症。在 V... 之前有读者看了我文章里代码截图之后，给我留言，Jerry，你为什么不用等宽字体呢？确实，我对编程等宽字体没有什么研究，感谢这位读者对我文章细心的阅读。网上做了一番功课，最后我选择了 Cascadia Code 这款等宽字体。看一下效果。图1和图2 分别是在 Visual Studio Code 里的非等宽字体和等宽字体 Cascadia Code，可见等宽字体确实能治疗程序员的强迫症。在 V...
- iframe 是一项历史悠久的前端技术，能够将另一个 HTML 页面嵌入到当前的宿主页面。每个通过 iframe 被嵌入的 HTML 页面都拥有自己独立的浏览上下文，会话历史记录和 DOM 树。虽然 iframe 如果使用不当，可能会引发性能问题和安全隐患，但是它也有其应用场合，即复用第三方应用页面。因此，即便在 SAP 这种企业级应用软件的前端开发领域，iframe 仍然有其一席之地。本文... iframe 是一项历史悠久的前端技术，能够将另一个 HTML 页面嵌入到当前的宿主页面。每个通过 iframe 被嵌入的 HTML 页面都拥有自己独立的浏览上下文，会话历史记录和 DOM 树。虽然 iframe 如果使用不当，可能会引发性能问题和安全隐患，但是它也有其应用场合，即复用第三方应用页面。因此，即便在 SAP 这种企业级应用软件的前端开发领域，iframe 仍然有其一席之地。本文...
- 登录 SAP Commerce Cloud Administration Cockpit，从下拉菜单里选择 Product Cockpit:点击这个箭头，打开 product 视图：点击这个 excel import 按钮：选择好 excel 和 media.zip 之后，点击 import：点击这个按钮查看 import 进度：进到 Backoffice 页面，根据 excel 里的 pr... 登录 SAP Commerce Cloud Administration Cockpit，从下拉菜单里选择 Product Cockpit:点击这个箭头，打开 product 视图：点击这个 excel import 按钮：选择好 excel 和 media.zip 之后，点击 import：点击这个按钮查看 import 进度：进到 Backoffice 页面，根据 excel 里的 pr...
- 通过一个实际的例子来理解。下面的代码，创建了一个新的 subject，然后调用 next 方法，多播给其所有的监听者。import { Subject } from 'rxjs';const jerry = new Subject();const subscription = jerry.subscribe((data) => console.log(data));console.log('... 通过一个实际的例子来理解。下面的代码，创建了一个新的 subject，然后调用 next 方法，多播给其所有的监听者。import { Subject } from 'rxjs';const jerry = new Subject();const subscription = jerry.subscribe((data) => console.log(data));console.log('...
上滑加载中
推荐直播
-
计算机核心课程贯通式实践教学体系介绍2025/01/05 周日 09:00-12:00
华为开发者布道师、湖南大学二级教授、博士生导师赵欢
1月5日上午，华为开发者布道师直播间将迎来重磅嘉宾！赵欢老师，计算机教育创新先锋，其 “小而全系统” 教学方案重塑计算机类专业课程与实践，融合鲲鹏生态技术知识，斩获国家级教学成果奖。杨科华老师专注小型全系统实践，在香橙派鲲鹏 Pro 开发板构建精妙 mini 系统，带您直击计算机底层奥秘。还有香橙派系统开发部李博经理，精通开发板硬件与应用，将全方位揭秘开发板使用及 FPGA 开发实战案例。三位大咖齐聚，为高校师生开启计算机系统能力提升的知识宝库，精彩即将上线，速速预约！
即将直播 -
GaussDB数据库介绍2025/01/07 周二 16:00-18:00
Steven 华为云学堂技术讲师
本期直播将介绍GaussDB数据库的发展历程、优势、架构、关键特性和部署模式等，旨在帮助开发者了解GaussDB数据库，并通过手把手实验教大家如何在华为云部署GaussDB数据库和使用gsql连接GaussDB数据库。
去报名 -
DTT年度收官盛典：华为开发者空间大咖汇，共探云端开发创新2025/01/08 周三 16:30-18:00
Yawei 华为云开发工具和效率首席专家 Edwin 华为开发者空间产品总监
数字化转型进程持续加速，驱动着技术革新发展，华为开发者空间如何巧妙整合鸿蒙、昇腾、鲲鹏等核心资源，打破平台间的壁垒，实现跨平台协同？在科技迅猛发展的今天，开发者们如何迅速把握机遇，实现高效、创新的技术突破？DTT 年度收官盛典，将与大家共同探索华为开发者空间的创新奥秘。
去报名
热门标签