SAP资深技术专家Jerry Wang的分享

OrganizationState作为createSelector的第二个参数，即projector，箭头函数的输入参数。左边的大写字符串是常量：b2bUser是在Management数据类型的基础上，增添了三个新字段：approverspermissionsuserGroupsB2BUser的五个字段：Management：1export interface B2BUserManagement extends Managementexport interfa

This issue is for discussion in this StackOverflow question：https://stackoverflow.com/questions/66458798/how-can-i-detect-current-users-user-group-in-spartacusIn order to test it, I add the following source code in AppModule’s constructor:constructor(b2

代码如下： ConfigModule.withConfig({ cmsComponents: { SimpleResponsiveBannerComponent: { component: () => import('./lazy/lazy-banner.component').then( (m) => m.LazyBanner ), } }

Lazy loading, also known as code splitting, lets you divide your JavaScript code into multiple chunks. The result is that you do not have to load all the JavaScript of the full application when a user accesses the first page. Instead, only the chunks that.

昨天 Jerry 读到了 SAP天天事 公众号上发布的一篇文章：多家知名企业选择 SAP Commerce Cloud 为客户提供卓越购物体验。SAP 日前宣布，锦江国际旗下的全球酒店供应链平台锦江联采、摩托车制造商新大洲本田和娱乐零售商 Virgin Megastore 已选择采用 SAP Commerce Cloud（电商云）解决方案，为客户提供卓越的电商体验。既然选择了 SAP Commerce Cloud 并进行实施，那么对其前台界面的定制化必不可少。面向终端消费者的 SAP Comme

源代码： getNextPageContext(): Observable<PageContext> { const a = this.store.pipe(select(RoutingSelector.getNextPageContext)); console.log('Jerry next page context: ' + a); a.subscribe((b) =>{ console.log(b); }); return a;

一个例子：运行时，触发change detection，调用refreshView方法：RouterLinkWithHref这个class实现了ngOnChanges hook方法：在updateTargetUrlAndHref方法里，生成href:this.commands就是我们传入到routerLink Directive里的输入：createUrlTree：将JavaScript对象this.urlTree, 序列化成字符串url：更多Jerry的原创文章，尽在：“汪

看个具体的例子：在app.component.ts里注入Router：export class AppComponent { constructor(router:Router){ console.log('Checking router'); router.events.pipe( filter(e => e instanceof ActivationStart) ).subscribe(e =>{ console.log('路由开始

我如果在Angular Component里输入一个并不存在path配置的url，会遇到如下错误消息：ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘custom/any/2’解决方案：再增添一个Angular wild 路由匹配，路径如下： { path: '**', component: WildComponent }之后就不会有错误消息了：更多J

https://angular.io/api/router/ResolveInterface that classes can implement to be a data provider. A data provider class can be used with the router to resolve data during navigation. The interface defines a resolve() method that is invoked when the naviga

看个具体的例子。const CUSTOM_ROUTES: Routes = [ { path: "custom/:id", component: RouteDemoComponent, data:{ name: 'jerry'}, canActivate: [CanActivateTeam] }];canActivate的类型是数组，而不是单个元素。在app.module.ts的providers里，导入CanActivateTeam:canActivate

参考链接：https://basarat.gitbook.io/typescript/type-system/index-signatures看一个例子：class Foo { constructor(public message: string){}; log(){ console.log(this.message) } } let foo: any = {}; foo['Hello'] = new Foo('World')

看个具体的例子：路由配置信息：const CUSTOM_ROUTES: Routes = [ { path: "custom/:id", component: RouteDemoComponent }];RouteDemoComponent的实现：import { Component, OnInit } from '@angular/core';import { ActivatedRoute } from '@angular/router';import { Observable } f

本文介绍Route interface里常用字段的使用方法。https://angular.io/api/router/Route#descriptionpathCan be a wild card (**) that matches any URL (see Usage Notes below). Default is “/” (the root path).两个星号：代表任意匹配。pathMatchThe path-matching strategy, one of ‘pref

做一个实验，如果把第53行包含router-outlet的代码注释掉：则在运行时,context.outlet为null：如此一来，没有机会执行第4107行的代码了：context.outlet.activatedWith(future, cmpFactoryResolver);RouterOutlet里包含的有用信息：整个这段代码都是在router-outlet的实现上下文里执行的。更多Jerry的原创文章，尽在：“汪子熙”:...

我有一个简单的Component：@Component({ selector: "app-root", template: ` <a href="/custom2">Click me</a> <div class="container"> <router-outlet></router-outlet> </div> `})export class AppComponent {运行时，router

我有一个最简单的app Component：@Component({ selector: "app-root", template: ` <div cxFocuses>Painful</div> <a href="/custom2">Click me</a> `})export class AppComponent {}我期望点击了Click Me这个标签之后，能跳转到相对路径/custom2.在app.module.js里

我在application Component的HTML里定义了一个router-outlet元素：遇到错误消息：router-outlet is not a known element查看其定义，源代码比文档更有说服力：/** * @description * * Acts as a placeholder that Angular dynamically fills based on the current router state. * * Each outlet can have

其实对于Angular指令的selector，我一直搞得不是太清楚，看下面的例子：selector的定义里，包含了中括号。在消费该Directive的HTML页面里，不用中括号：则Directive正常工作，我在Directive的ngOnInit里打印了一些调试语句。如果消费Directive的时候，用了中括号，反而报错：selector定义中去掉中括号，反而不工作了：正确的打开方式：在Directive selector里使用中括号，消费Directive的时候去掉。更多Jerr

本文写作背景是，我需要开发一个单元测试，能够测试到protected convertListItem方法。我直接敲service., Visual Studio Code的代码自动完成列表里，没有出现convertListItem，因为它是protected方法。但我们要知道，因为Angular TypeScript编译后生成的是JavaScript代码，而JavaScript里是不存在protected方法概念的，因此我们可以使用第244行这种动态调用的方式，实现在运行时仍然能够执行convertLi

今天我打开Visual Studio Code准备进行Angular开发时，看到Angular TSLint报了这个警告信息：Not using the local TSLint version found for ‘c:/Code/SPA/spartacus/feature-libs/organization/administration/components/unit/services/unit-list.service.spec.ts’To enable code execution from

monkey patched: monkey patch指的是在运行时动态替换,一般是在startup的时候.下面的测试代码可以让我们弄清楚，浏览器支持的原生函数setTimeout，是如何在Angular应用启动时被monkey patched的：将setTimeout保存到一个Angular变量里。在zone-evergreen.js的patchMethod方法里：下图地2719行，能看到timers组下面的setTimeout，setInterval被monkey patched的入口：

默认策略下，用户时间，计时器，XHR，promise等事件触发，所有的组件都会执行变更检测。看一个实际例子：import { Component, OnInit, Input } from '@angular/core';@Component({ selector: 'appparentchild', template: `<h1>title</h1> {{ JerryHelloChange }} <child [childContent] = "pa

我在app.component.ts的template文件里试图使用另一个Component时，遇到如下错误消息：app-parent-child is not a known element:在parent.module.ts定义里，检查exports区域里是否包含了selector app-parent-child对应的Angular Component：ParentChildComponent：declarations: 定义了该NgModule的组成部分：Components, direc

该错误消息意思是创建Component时未指定其属于哪一个module，因此先用命令行ng g m parent创建一个名为parent的module：默认生成的代码如下图所示：然后使用ng g c 创建一个名为parent-child的Component，使用参数 -m parent挂接到刚才新建的名为parent的module即可。更多Jerry的原创文章，尽在：“汪子熙”:...

例子：我的service class里有一个protected方法，我想在单元测试里对其进行测试：一种思路是，可以沿用Java里测试protected方法的变通方式，即创建一个新的sub class，继承包含该protected方法的class，然后在子类里新建一个公有方法作为wrapper之用，实现逻辑只有一行，就是调用父类的protected方法。例子如下：这样，我只需要对子类的公有方法进行单元测试即可测试到父类的protected方法。完整源代码：import { Injectable

同ngOnChanges hook的调用入口一致，请查看这篇文章：fixture.detectChange开始单步调试，如何执行到Directive的ngOnChange钩子.refreshView是一个逻辑很多的函数：/** * Processes a view in update mode. This includes a number of steps in a specific order: * - executing a template function in update mode;

this._tick里调用this.changeDetectorRef.detectChanges():首先从RootViewRef开始检测：context里能看到Component的数据：renderComponentOrTemplate:refreshView里会调用init和check hook:/** * Executes post-order init and check hooks (one of AfterContentInit, AfterContentChecked

调试出发点：在detectChange内部本身有一个ngZone：接下来会在this.ngZone里执行箭头函数的逻辑，即this._tick():this.ngZone.run里面调用_inner的run方法：this._zoneDelegate.invoke:ZoneDelegate.invoke方法内部, 调用this._invokeZS.onInvoke:onInvoke：首先onEnter进入Zone：onEnter方法，修改zone._nesting的层数：p

https://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html假设有这三个函数：foo();bar();baz();function foo() {...}function bar() {...}function baz() {...}要度量其运行时间：var start, time = 0; timer = performance ? performance.now : Date.now;

我的单元测试源代码：@Component({ selector: 'cx-host', template: ` <div id="a" [cxFocus]="{ autofocus: true, refreshFocus: model.uid }"></div>`, changeDetection: ChangeDetectionStrategy.Default,})class MockComponent { model = "";}将下图import的

做一个测试：测试结果：第67行执行完毕之后，ngOnChange和ngAfterViewInit均未触发。即使手动修改Component的属性也没用了：单元测试里修改的属性已经生效了：还是解析到了我的Directive啊：整个current都为空，执行不进去了：current字段是在2130行被清空的：更多Jerry的原创文章，尽在：“汪子熙”:...

AsyncTestZoneSpec：然后执行第一个it：再执行beforeEach的callback：然后执行第二个it：由此可见，beforeEach相当于ABAP单元测试的setup方法。更多Jerry的原创文章，尽在：“汪子熙”:

源代码：import { Component, OnInit } from '@angular/core';import { FormControl } from '@angular/forms';import { HttpClient } from '@angular/common/http';const ENDPOINT = "http://localhost:3000/echo?data=";@Component({ selector: 'jerryform', template

奇怪的问题，我的req.responseType字段没有显式赋值，而默认值为json：这个默认值是在哪里填充的呢？调试代码，http.js的第1669行有这个默认的逻辑：解决方案：下图第26行responseType: 'text' as 'json'import { Component, OnInit } from '@angular/core';import { FormControl } from '@angular/forms';import { HttpClient, Ht

这是Jerry 2021年的第 11 篇文章，也是汪子熙公众号总共第 282 篇原创文章。Jerry之前的文章 SAP UI5 OData谣言粉碎机：极短时间内发送两个Odata request, 前一个会自动被cancel掉吗，介绍过SAP成都研究院CRM Fiori开发团队开发过的一个Live Search的场景。用户创建Opportunity，维护Account字段，每输入一个字符，都会触发SAP UI5 Input控件的liveChange事件。在该事件的onAccountInputFieldC

form源代码：import { Component, OnInit } from '@angular/core';import { FormControl } from '@angular/forms';@Component({ selector: 'jerryform', template: ` Favorite Color: <input type="text" [formControl]="favoriteColorControl"> `})export

原因是我把Base focus Directive的OnInit函数删除了：添加上之后问题消失：更多Jerry的原创文章，尽在：“汪子熙”:

源代码：@Component({ selector: "app-root", template: ` <input [(ngModel)] = "jerry"> `})export class AppComponent implements AfterViewInit { _jerry = "Hello"; ngAfterViewInit(): void { setTimeout(() => { this._jerry = "chan

ngClass定义的位置：export declare class NgClass implements DoCheck { private _iterableDiffers; private _keyValueDiffers; private _ngEl; private _renderer; private _iterableDiffer; private _keyValueDiffer; private _initialClasses;