自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(108)
  • 资源 (5)
  • 论坛 (6)
  • 收藏
  • 关注

原创 如何通过ActivationStart监控 Angular的路由激活事件

看个具体的例子:在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('路由开始

2021-02-28 14:44:45 54

原创 Angular 路由的wild匹配

我如果在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

2021-02-27 22:18:33 40

原创 Angular路由里的resolve接口的使用方法

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

2021-02-27 21:39:08 94

原创 SAP官方帮助网站,help.sap.com 背后那些事儿

这是Jerry 2021年的第 16 篇文章,也是汪子熙公众号总共第 287 篇原创文章。“My momma always said life was like a box o’chocolates. You never know what you gonna get.”“母亲经常说,人生就像一盒巧克力,你永远不知道你会得到什么。”这段话用在程序员的职场生涯上也同样成立。就在2020年8月前,Jerry 在 SAP 成都研究院的开发工作,一直专注在后台开发领域,使用的编程语言和平台是 ABAP,J

2021-02-27 18:46:58 1102 6

原创 Angular路由里的canActivate用法

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

2021-02-26 21:42:21 75

原创 TypeScript里的中括号类型定义法

下图定义了一个类型Data,可以包含一个字段,指向任意数据:https://stackoverflow.com/questions/58090665/typescript-what-is-the-type-of-the-object-name-string-string class aa{ constructor(headers?: string | { [name: string]: string | string[]; }){ } }含

2021-02-26 19:50:10 104

原创 TypeScript里的Index signature

参考链接: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')

2021-02-26 19:36:28 54

原创 如何从Angular的ActivatedRoute数据结构中获得运行时路由信息

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

2021-02-26 17:09:57 54

原创 Angular Route数据结构里常用字段使用方法一览

本文介绍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

2021-02-26 16:37:56 33

原创 为什么Angular的路由执行离不开router-outlet标签

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

2021-02-26 13:52:14 48

原创 Angular router-outlet占位符层级结构的子节点,运行时是如何插入的

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

2021-02-26 11:57:06 41

原创 最简单的Angular Route hello world场景都跑不通的一个原因

我有一个最简单的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里

2021-02-26 11:33:12 51

原创 如何使用Chrome command API查找SAP Spartacus的router-outlet

Chrome Command Line API的语法:两个美元符号$$等价于document.querySelectorAll总共两个router-outlet:第一个元素:第二个元素在split view里:更多Jerry的原创文章,尽在:“汪子熙”:

2021-02-26 10:40:30 46

原创 StackBlitz里无法重命名项目的问题

为了找到重命名StackBlitz项目名称失败的问题,我打开了Chrome开发者工具,在network标签页里看到了这样的错误消息:has already been taken这说明,StackBlitz的项目是全局可见的,所以起名angular_route这种名称几乎100%会和StackBlitz上其他已有的项目产生命名冲突,可以在名称上加上自己名称作为前缀,比如jerry_i042416这种,就可以重命名成功了:更多Jerry的原创文章,尽在:“汪子熙”:...

2021-02-25 22:59:52 51

原创 Angular路由错误消息 - router-outlet is not a known element

我在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

2021-02-25 22:52:43 73

原创 SAP Spartacus里px,em和rem的应用

pxpx像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。任意浏览器的默认字体高都是16px.emem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。em的值并不是固定的;em会继承父级元素的字体大小。rem使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。rem可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以

2021-02-25 11:58:10 54

原创 什么是前端开发中的Pseudo elements

Pseudo元素的定义语法:连续出现的两个冒号。很早期的pseudo元素甚至使用了单冒号的定义语法。看一个具体的例子:下图article元素里包含了一个p节点,节点内包含了一段话。现在我想把这个段落的第一行用蓝色高亮:使用pseudo元素的selector可以轻松实现这个需求:article p::first-line{color: blue;}更多Jerry的原创文章,尽在:“汪子熙”:...

2021-02-25 11:43:37 57

原创 Firefox开发者工具里查看HTML元素的Box模型

box模型的组成部分:Content box:通过width和height属性指定大小。padding box:衬垫。包裹content盒模型。border boxmargin box如下图所示:标准的CSS模型里,box的尺寸为content box,padding和border之和:切换成另一种盒模型: alternative model语法:box-sizing: border-box切换成alternative mode之后,height和wid

2021-02-25 11:34:46 47

原创 SAP Spartacus里的bootstrap button usage

package.json里对bootstrap的引用:The .btn classes are designed to be used with the element. However, you can also use these classes on or elements (though some browsers may apply a slightly different rendering).When using button classes on elements that a

2021-02-25 11:24:29 39

原创 一个SCSS里mixin的使用例子

Mixins are the Sass equivalent of macros in other programming languages. If you’ve programmed before you could think of them as functions, procedures, or methods, but they aren’t technically any of these concepts because their function is to generate code.

2021-02-24 19:00:46 49

原创 Firefox开发者工具里的CSS Flexbox Inspector

使用flex布局的元素,在HTML里能看到flex的小图标,如下图所示:点击flex小图标,可以把flex container及其元素的轮廓高亮显示:在这个例子里,a标签既是一个flex item,也作为flex container,装载了button和span两个字元素。单击flex这个小图标可以高亮对应flex元素:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5e9xouVR-1614149022543)(https://upload-images.ji

2021-02-24 14:43:53 37

原创 SAP Spartacus Table cell显示数据类型的Component决定逻辑

以SAP Spartacus B2B org unit list为例,table cell到底用什么样的Component来显示数据,取决于units.config.ts文件里定义的配置数据unitsTableConfig:如果我将name column的dataComponent改成CellComponent,则最后使用一般的CellComponent来显示数据,不再含有Expand / Collapse功能:而如果一个Component没有显式定义selector,最后渲染出来的内容里,A

2021-02-24 14:00:57 41

原创 SAP Spartacus cxOutlet里的元数据存储,outlet名称和待渲染Component的映射关系

从下图代码不难看出,outlet.directive.ts调用outlet.service.ts的get方法,根据outlet名称,一个字符串变量,去获取待渲染的Component类型。private buildOutlet(position: OutletPosition): void { let templates: any[] = <any[]>( this.outletService.get(this.cxOutlet, position, USE_STACKED

2021-02-24 11:39:44 48

原创 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件

如下图所示:传入cxOutlet这个自定义指令的值是:table.orgUnit.data.name:cxOutlet自定义Directive的ngOnChanges方法里,进行Component的渲染,通过方法this.render实现:vcr: View Container Referencethis.vcr.createEmbeddedView每个outlet都有before, replace和after三个position:传入cxOutlet自定义指令的SimpleCh

2021-02-24 10:49:42 52

原创 SAP Spartacus 里的三种table类型

定义在文件table.component.html里:verticalStackedLayoutverticalLayouthorizontalLayout从每种类型的ng-container内的层次结构即可区分。比如Unit List的table,生成的HTML source code里,结构依次是table, thead和tr,因此属于第二种verticalLayout类型。在tr-td里显示的运行时内容,取决于ng-template运行时的注入内容:具体需要去研究cxOutl

2021-02-23 22:14:55 58

原创 如何在移动设备上以开发模式访问SAP Spartacus

命令行 ipconfig/all, 查到本地笔记本电脑ip地址为192.168.3.3:本地运行ng serve --host 192.168.3.3:暂时禁用掉SAP电脑的防火墙软件McAfee:在手机上访问192.168.3.3:4200即可。需要注意的是,由于security原因,为了临时避免NET::ERR_CERT_AUTHORITY_INVALID错误,我们需要在手机上先访问OCC API的endpoint,点击“高级”:点击“继续前往XXXX(不安全)”:.

2021-02-23 20:16:48 47 1

原创 使用git checkout命令切换到指定的commit

git checkout命令有很多种用法。git checkout + 分支名,切换到指定的分支。比如git checkout develop:切换之后,HEAD文件的内容:ref: refs/heads/developgit checkout + 文件夹丢弃工作区域中指定文件夹下面的修改:git checkout + commit id切换到指定的commit上去。You are in ‘detached HEAD’ state. You can look aroun

2021-02-23 19:43:53 183

原创 SAP Spartacus使用product configuration功能时遇到Commerce Cloud后台的报错

从错误日志里的app_Kubernetes_io和docker_id, 知道后台是一个CCV2系统。{ "_index": "flb-2021.02.22", "_type": "flb_type", "_id": "b3243f97-d237-f049-3471-a181583767c1", "_version": 1, "_score": null, "_source": { "@fb_timestamp": "2021-02-22T14:13:41.254Z", .

2021-02-23 19:15:35 48

原创 CSS里的inline-size和逻辑属性

inline-size影响一个元素的width或height,进而改变一个元素的box model的width或者height,取决于元素的writing-mode.参考链接.这是一个logical property, 为了支持internationalization,因为有些国家比如亚洲很多国家的文字,除了从左到右显示外,还可以从右到左,从上到下的顺序显示。普通属性和对应的逻辑属性:更多Jerry的原创文章,尽在:“汪子熙”:...

2021-02-22 15:27:08 45

原创 SAP Spartacus B2B Org Unit List节点展开的递归逻辑实现

Rustic Services有两个子节点,点击之后,触发toggle方法:子节点分别是Services East和Services West:this.treeToggle$是一个BehaviorSubject:toggle执行后,执行next方法,通知subscriber:我想知道的是这个Mapsubscriber是什么时候订阅的:可以在Chrome调试器里找到Mapsubscriber的方法实体project:() => tree, 然后作为关键字在Visual Studio

2021-02-22 13:21:35 42

原创 SAP Spartacus在某些屏幕尺寸下无法正常工作的原因分析

有个使用SAP Spartacus的客户遇到一个问题:We are getting one issue in our Spartacus application (currently we are on 2.1 version).When we are trying to load checkout-login page with 100% zoom in the browser, it is loading not-found page instead of checkout-login page

2021-02-22 11:19:46 55

原创 SAP Spartacus如何为不同的environment设置不同的baseUrl

这里说的不同的environment意思是指Dev,QA和Prod这些environment.Currently in the build job, SAP Commerce Cloud always run ng build command which always pick the default app.module.ts irrespective of maintaining this property in environment specific basis, hence all envir

2021-02-22 11:15:19 40

原创 如何将SAP Spartacus的默认home页面替换成login页面 - ProtectedRoutesService

现状We tried from CMS - we changed the starting-page of site to login page, made homepage as not-default and this brought the login page. However, it’s not refreshing or redirecting to HomePage after successful login.解决方案Is your homepage accessible onl

2021-02-22 11:10:11 35

原创 如何通过代码获得当前SAP Spartacus Component渲染所基于的slot名称

解决方案You can inject the ancestor PageSlotComponent in your custom component and get the slot name by accessing its public property position$: Observable.export class CustomComponent { constructor(@Optional() protected pageSlotComponent: PageSlotCompon

2021-02-22 11:09:04 34

原创 Angular ɵɵelementStart和ɵɵText的工作原理

我有一个Angular Component:@Component({ selector: "app-root", template: ` <div cxFocuses>Painful</div> `})export class AppComponent {}Angular编译器编译后生成的JavaScript代码:这些ɵɵelementStart函数的执行上下文:在templateFn里被调用:单步调试下图的第48行代码:即进入ɵɵelem

2021-02-22 11:07:45 55

原创 如何解决使用JSON.stringify时遇到的循环引用问题

程序员在日常做TypeScript/JavaScript开发时,经常需要将复杂的JavaScript对象通过JSON.stringify序列化成json字符串,保存到本地以便后续具体分析。然而如果JavaScript对象本身包含循环引用,则JSON.stringify不能正常工作,错误消息:VM415:1 Uncaught TypeError: Converting circular structure to JSON解决方案,使用下面这段来自这个网站的代码,定义一个全局cache数组,每当待

2021-02-20 19:13:48 116

原创 一个关于Angular Directive selector里的中括号使用问题

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

2021-02-20 17:21:45 52

原创 关于Angular里给Component protected方法写单元测试的技巧

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

2021-02-20 17:16:55 24

原创 Not using the local TSLint version found for XXX

今天我打开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

2021-02-20 17:02:32 572

原创 Angular如何判断某个DOM节点包含Directive

如下图所示:核心的逻辑位于下图isDirectiveHost函数中:function isDirectiveHost(tNode) { return (tNode.flags & 1 /* isDirectiveHost */) === 1 /* isDirectiveHost */;}上下文:ɵɵelementStartflags:1,表示directive host:这个tNode结构应该是Angular运行时根据Angular编译器处理TypeScript文件而生成的

2021-02-20 16:20:38 32

适合程序员使用的文件搜索工具,支持各种高级搜索条件

程序员

2021-02-20

将近2万个汉语四字成语大全,txt格式存储

将近2万个汉语四字成语大全,txt格式存储

2021-04-06

dgreadiness_v3.6.zip

windows10 1909版本,如果想安装VMWare Workstation player 15.5.5,需要使用该powershell脚本,在Administration模式下,禁掉hyper V

2021-02-17

winzip70 (1).exe

winzip的经典版本,适用于windows 98实体操作系统及虚拟机

2021-02-16

自己用Java编写的有道云笔记图片批量下载工具

使用方式:java -jar tool.jar [0,1,2] 0,1,2分别是有道云笔记的编号。0的guid:c91a710af51c1e1b20f5d1da2140a9e4; 1的guid:4cc557ab9b7cbde0515b49a155c5dce3 2的guid:6eaae532daaa678cc610f2a34cbc9119

2020-11-29

《Jerry 2017年的五一小长假:8种经典排序算法的ABAP实现》文章的源代码

《Jerry 2017年的五一小长假:8种经典排序算法的ABAP实现》文章的源代码下载,解压之后手动复制粘贴到ABAP系统的SE24或者SE80事物码里。

2020-11-24

汪子熙的留言板

发表于 2020-01-02 最后回复 2020-03-20

怎样才是理想的程序员

发表于 2015-06-28 最后回复 2019-07-29

SAP的这三款CRM解决方案,您能区分清楚么

发表于 2018-01-08 最后回复 2018-01-09

脑子快”的程序员更优秀吗

发表于 2015-08-09 最后回复 2015-10-27

一个平庸程序员的自白

发表于 2015-08-22 最后回复 2015-08-22

金庸小说里程序猿的练级心法

发表于 2015-06-28 最后回复 2015-08-14

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除