皮皮网

1.angular��������ĿԴ��
2.angular8？
3.Angular 应用实现 Lazy Load(懒加载)的项目项目实战经验分享
4.关于 Spartacus 开源项目的 peerDependencies
5.如何用63行代码写一个NgRx Store

angular��������ĿԴ��

       使用group by 去进行分组。这个像sql语句一样的源码r源

       <select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">

        <option value="">-- 请选择 --</option>

       </select>

angular8？

       angular8项目多环境配置方案

       é¡¹ç›®åœ¨æ‰“包发布的时候往往需要配置不同的server的地址，当然，有些同学用的是nginx转发，因此不需要。

       ä½†ä¸ä»…仅局限于请求地址，有可能某些变量密钥等等，比如微信的appid，测试环境和正式环境用的可能是不一致的。

       ä¸ºäº†æ–¹ä¾¿æ‰“包，angular工程化中为开发者做了一些改进。打包时候，引入environment的设计。

       æ³¨æ„ä¸€ä¸‹å‡ ç‚¹ï¼š

       1environments中可以配置多套不同的环境

       2默认引入的都是environment.ts，这一点必须一致睁蠢。

       3修改angular.json

       4打包指定参数----configuration=dev

       json中的projects-项目名-architect-build-configurations-production。增加不同的环境配置，复制比较容易。ngbuild--prod-c=dev：

       ç„¶åŽè®¾ç½®json中的projects-项目名-architect-serve，这悉困陪样就可以在ngserve中增加更多的尺源环境配置，ngserve-c=dev

       æ˜¯ä¸æ˜¯å¾ˆç®€å•å‘¢ï¼Œæœ‰ä»»ä½•é—®é¢˜å°±åœ¨ä¸‹é¢ç•™è¨€å§ï¼

       Angular8引入ngx-echarts时报错Cannotreadproperty'init'ofnull

       åœ¨é¡¹ç›®ä¸­ä½¿ç”¨ngx-echarts时遇到了问题，在本地环境中所有的图均能显示出来渗枯，在打包后所有的图均无法显示并报错

       åœ¨æŸ¥çœ‹äº†æºç åŽå‘现问题出在echarts上，echarts为null导丛雀洞致了该问题的出现。

       èµ·åˆæˆ‘以为原因是出在生命周期钩子上，将请求数据的方法写在了ngAfterViewInit内，该问题仍然没有得到解决。

       ç»è¿‡æŸ¥æ‰¾ç›¸å…³èµ„料，在ngx-echarts的git库issue中找到了该问题的解决方法：

       åœ¨è¿™å²æ¨¡é‡Œçš„echarts后增加{ init:echats.init}，即可解决echarts找不到的问题。

       é™„上官方issue的地址：

Angular8起步教程

       è¿™å°±æ˜¯è¿™ä¸ªç¤ºä¾‹æ•™ç¨‹çš„最终效果。

       ä¸Šé¢ä¸€ä¸ªå¯¼èˆªæ¡ï¼Œç„¶åŽæ˜¯2个页面。

       åˆ›å»ºå®ŒæˆåŽï¼Œè¿è¡Œï¼š

       æ‰“å¼€/src/app/app.component.html，删除内容，添加：

       æ‰“å¼€/app/styles.scss，添加：

       åˆ›å»º2个组件：

       æ‰“å¼€/src/app/app-routing.module.ts添加：

       æ‰“å¼€/src/app/home/home.component.html，替换内容为：

       home.component.ts中添加：

       home.component.scss中添加：

       home.component.html中添加：

       /src/app/app.module.ts中添加：

       home.component.ts中定义name属性：

       home.component.html中添加：

       [ngIf]绑定一个表达式*clickCounter4*。

       å¦‚果表达式为false，将会调用ngIfElse指定的名为none的模板。

       å¦‚果表达式为true，将会显示ng-template块中的HTML内容。

       æ‰“å¼€home.component.html，修改最后一个play-containerclass：

       clickCounter4之后，背景色就会变为黄色。

       è¿˜å¯ä»¥æŒ‡å®šå¤šä¸ªCSS属性：

       å¦‚果你想添加或者移除定义在CSS中的class，可以使用class绑定。

       ä¿®æ”¹é¢¤é™ªå½“前play-container：

       home.component.scss中添加：

       å¯ä»¥ä½¿ç”¨ngClass设置多个class：

       home.component.ts中添加：

       home.component.scss中添加：

       Service可以复用，接下来我们创建一个service，用来调用api获取数据，并显示在list页面。

       gs是generateservice的缩写。茄凯蠢

       æˆ‘们给这个service命名为ponent.ts中添加调用myMethod：

       ngOnInit()会在组件加载时触发。

       ponent.ts中添加：

       list.component.html中添加：

       list.component.scss中添加：

       æœ€ç»ˆæ•ˆæžœï¼š

记录angular8中使用input框输入每一个字符都会失去焦点问题

       å‰ç«¯æ¡†æž¶angular8.0

       ui组件NG-ZORRO

       åœºæ™¯ï¼šè¡¨å•è¾“å…¥:前端动态添加input框

       æ•°æ®ï¼šeg：['','','xxx']数组每项为string类型，?["..1./",".2.1.",".2.1.-..1.

       div?*ngFor="letitemofipPoolData['_ipAddress']indexasi;trackBy:trackByFn"?style="height:px;position:relative;"

inputname="{ { '_ipAddress'+i}}"nz-inputtype="text"placeholder="请输入IP/子网IP/子网范围"required

       [(ngModel)]="ipPoolData['_ipAddress'][i]"(ngModelChange)="checkIpRangeVal($event)"

span*ngIf="error['iprange']"class="text-error"IP输入不合法/span

divclass="btn-handle-item"

       buttonnz-buttonnzType="danger"[nzSize]="'small'"

       (click)="deleteIPCollectionField(i)"*ngIf="ipPoolData['_ipAddress'].length1"

       inz-iconnzType="minus"nzTheme="outline"/i

       /button

       button*ngIf="itemipPoolData['_ipAddress'].length5"

       nz-buttonnzType="源圆首primary"[nzSize]="'small'"[disabled]="ipPoolData['_ipAddress'].length-1i"(click)="addIPCollectionField()"

       inz-iconnzType="plus"nzTheme="outline"/i

       /button

/div

       /div

       å‘1：

       é—®é¢˜ï¼š?当数组每项为string类型时，循环后input内ngmodel直接用item绑定，会出现ngmodle无法赋值问题

       è§£å†³ï¼šæ•°ç»„ngfor循环后每项内容ngmodel绑定需腔仔用ipPoolData['_ipAdress'][i]，若直接用item则无法绑定雹数数据，ngmodel一般需要item.value类型；

       å‘2：

       é—®é¢˜ï¼šinput每输入一个字符，鼠标就会失焦问题；

       åŽŸå› ï¼šngmodel用ipPoolData['_ipAdress'][i]绑定后，input每次输入后，angular会重新查询服务器可能会重置包含所有新条目对象的列表，即使先前已显示这些条目也是如此；在这种情况下，Angular只能看到由新的对象引用组成的新列表，它别无选择，只能用所有新的DOM元素替换旧的DOM元素。因此会出现input每输入一个字符，鼠标就会失焦问题；

       è§£å†³æ–¹æ¡ˆï¼š

       div*ngFor="letitemofipPoolData['_ipAddress']indexasi;trackBy:trackByFn"/div

       ngFor循环后使用trackBy：trackByFn；向该组件添加一个方法，该方法返回NgFor应该跟踪的值。这个例子中，该值是ipPoolData['_ipAdress']的i项，如果ipPoolData['_ipAdress']的index项已经被渲染，Angular就会跟踪它，而不会重新向服务器查询相同的ipPoolData['_ipAdress']的index项。

       trackByFn(index:any,item:any){

returnindex;?

       }

angular8学习总结

       checkedRowIndex=-1;

       checkedRowData:any;

       pageInfo:PageInfoCompanyModalModel=newPageInfoCompanyModalModel();

       orgName:string;

       constructor(

       privatemodal:ModalHelper,

       privatecompanyConfig2Service:CompanyConfig2Service,

       ){ }

       ngOnInit(){

       this.getCompany();

       }

       select(data,i){

       this.checkedRowChange(true,data,i);

       }

       getCompany(){

       this.pageInfo.loading=true;

       this.companyConfig2Service.getCompany({ pageInfo:{ pageNum:this.pageInfo.pageNum,pageSize:this.pageInfo.pageSize},orgName:this.orgName}).subscribe(data={

       if(data){

       this.pageInfo=data.data;

       }

       this.pageInfo.loading=false;

       });

       }

       /

**

       /

**

       checkedRowChange(event,data,index){

       this.checkedRowIndex=event?index:-1;

       this.checkedRowData=data;

       }

Angular8实战（十七）轮播图组件

       æœ¬ç« ä¸»è¦å†…容是完成这个轮播图组件~

       ä½†æ˜¯ä»Žç¤ºä¾‹ä¸­å¯ä»¥çœ‹å‡ºï¼Œè½®æ’­åˆ°æœ€åŽä¸€å¼ å›¾ä¹‹åŽå°±åœæ­¢äº†ï¼Œä¸å†æ»‘动了。如何处理这个问题呢？简单的方法敬空就是：取余

       å†æ¥çœ‹ä¸€ä¸‹æ•ˆæžœ

       ä½†æ˜¯æ­¤æ—¶å¦‚果手动切换，图片可能会亮启瞎停在中间旁配。如何处理呢?

       æ·»åŠ å¸é™„效果看一下

       æ­¤æ—¶å‘¢ï¼Œè¿˜æœ‰ä¸€ä¸ªé—®é¢˜ï¼Œå‡è®¾ç›®å‰åœ¨ç¬¬äºŒå¼ å›¾ç‰‡ä¸Šï¼Œå¦‚果手动往前滑一下，应该跳回第一张图片，但目前也会直接跳到第三张图片。所以我们需要控制scroll事件，同时需要考虑数组越界的处理。

       6.indicator

       indicator应该随着图片的轮播也会转换，并且我们希望在当前索引时，indicator是红色的。

       7.最后处理一下内存泄漏问题

       å½“使用setTimeout，setInterval等这些方法后，需要注意内存泄漏的问题。

       è‡³æ­¤ï¼Œè½®æ’­å›¾å°±å…¨éƒ¨å®Œæˆäº†ã€‚

Angular 应用实现 Lazy Load(懒加载)的项目实战经验分享

       Angular 应用的 Lazy Load 是一种优化策略，它能动态加载特定部分的项目代码，以提升用户体验。源码r源在企业级Angular应用中，项目将代码按照业务逻辑拆分为多个Module，源码r源ai绘画源码地址并使用Lazy Load机制按需加载，项目能显著减少应用程序的源码r源初始加载时间，降低整体大小。项目Angular的源码r源代码拆分技术与Lazy Load相辅相成，使得应用程序可以更快启动，项目避免长时间等待。源码r源

       在开发Spartacus电商Storefront项目时，项目Angular团队在语义化版本迭代过程中，源码r源对应用代码进行了拆分，项目并引入了Lazy Load支持。这一策略直观地展示了Lazy Load的效果。打开Spartacus首页，实时弹幕通知源码加载的资源文件包括Spartacus核心功能的实现，而点击购物车图标进入购物车页面时，以Lazy Load方式加载了一系列以feature-libs前缀开头的资源文件。这表明，用户在访问首页时仅浏览商品陈列，与购物车显示逻辑无关，因此将购物车UI和服务拆分为独立模块，并应用Lazy Load，是合理的设计思路。

       要判断Angular module是否已启用Lazy Load，最直接的方法是在开发模式下执行yarn start命令，观察module构建情况。Initial Chunk Files列表显示使用Eager Load加载策略的Angular module，而Lazy Chunk Files列列出启用了Lazy Load的module清单。在点击Cart图标后的Network面板中出现的JavaScript文件，将出现在Lazy Chunk Files列下。

       要启用Lazy Load，应用小程序源码首先选择在Network面板中被Lazy Load加载的JavaScript文件，如feature-libs_cart_quick-order_public_api_ts.js，然后找到对应的module实现源代码，其中的关键逻辑在于导入QuickOrderModule的代码行。通过在@NgModule注解修饰的代码块中导入所有需要的customizations，可以实现对已有Lazy Load模块的定制化开发。

       对于Spartacus项目中的标准Module，如果已启用Lazy Load，客户希望对其进行定制，可以通过创建自定义Feature Module，在其中静态导入所需Spartacus标准Module，并在@NgModule注解的providers区域导入所有需要的customizations。在Storefront应用的app.module.ts文件中，使用动态导入功能将自定义Module进行Lazy Load。

       综上所述，Angular应用的Lazy Load策略能优化用户体验，通过代码拆分和动态加载机制，主页源码带音乐实现应用程序的高效启动。在实际开发过程中，理解和实现Lazy Load不仅能够提升性能，还能提供更大的灵活性，允许对已有模块进行定制化开发，以满足特定业务需求。

关于 Spartacus 开源项目的 peerDependencies

       通过ng new app创建的Angular应用，自带了个依赖。

       在客户Storefront中使用Schematics安装了library后，本地新建一个空文件夹，并执行命令行操作。

       该文件夹内只有一个node_modules文件夹，其中包含许多js文件和TypeScript的.d.ts文件。

       在@Spartacus/storefront的package.json中，除了tslib的dependencies外，还包含了一些在Spartacus项目源代码package.json中定义的依赖。

       npm能够很好地处理子依赖关系，燕窝溯源码2011例如，如果某个包依赖于request版本2和其他库，但其他库依赖于request版本1，生成的依赖关系图如下：

       这种情况下，some-other-library将拥有自己的请求v1副本，可以独立使用，而不会干扰包的v2副本，这通常是非常理想的。

       然而，有一个用例可能会失败：插件。插件包旨在与另一个host包一起使用，即使它并不总是直接使用host包。Node.js包生态系统中存在许多这种模式的例子。

       从本质上讲，插件旨在与主机包一起使用，更重要的是，它们旨在与特定版本的主机包一起使用。例如，我的chai-as-promised插件的1.x和2.x版本适用于chai 0.5版本，而3.x版本适用于chai 1.x。

       另一个例子是，grunt 0.3.1版本的grunt-contrib-stylus可以与grunt 0.4.0rc4一起使用，但由于删除了API，在与grunt 0.4.0rc5一起使用时会中断。

       假设plugin显式声明了host package的版本号，即使对于确实具有这种直接依赖关系的插件，可能是由于host包提供了实用程序API，在插件的package.json中指定依赖项也会导致依赖关系树包含host包的多个副本。

       例如，假设winston-mail 0.2.3在其dependencies中指定了winston: 0.5.x，因为这是对其进行测试的最新版本。

       作为应用程序开发人员，使用了winston的最新版本0.6，并将它们放在package.json中。

       一旦运行，将产生winston的两个不同版本。

       这种问题的解决方案就是使用peerDependencies。

       使用peerDependencies非常简单。在编写plugin时，请确定peerDependencies的host package的版本，并将其添加到package.json中。

       现在，当安装chai-as-promised时，chai包将随之被安装。

       如果稍后尝试安装另一个仅适用于0.x版本的Chai的Chai插件，将收到错误消息。

如何用行代码写一个NgRx Store

       深入解析 NgRx Store 的内部运作机制，通过精简的行代码实现一个基础版本的 StoreService，探索 NgRx Store 如何通过 RxJS 进行状态管理。本文旨在为开发者提供一个简化版的 NgRx Store 实现，以深入理解其核心原理。

       通过一个简单的 Angular NgRx-Seed app，我们可以学习 NgRx Store 的基础组件和工作流程。本文章将提供一个超简化的 StoreService，包含 dispatching action、accumulating state、以及使用 selector 订阅更新状态的核心功能。

       构建一个与 NgRx 非常相似但高度简化的 StoreService，代码覆盖了基本的 Store 功能，包括创建行为主题、调度 action、以及实现状态的积累与更新。此 StoreService 实现仅供学习和理解 NgRx Store 的内部构造，不可用于实际项目。

       关注 queueScheduler 的使用，确保 action 以初始化顺序同步接收，避免因重新进入而导致的内存溢出问题。action$ 和 reducer$ 的融合通过 withLatestFrom 操作符完成，确保了状态更新的正确执行。

       reducerFactory 是 NgRx Store 的复杂部分，通过闭包实现状态的融合。简化版本的 StoreService 中，忽略了对 meta reducers 的处理，使用 combineReducers 作为默认工厂函数，用于创建一个可作为 StoreService 的源的 reducer 融合函数。

       在扫描操作符（scan）的作用下，action$ 和 reducer$ 被混合以创建一个具有状态记忆能力的 stream。实现的累计函数 reduceState 实现了状态的更新与累积，以响应 action 和 reducer 的变化。

       对于 select 和 createSelector 的实现，本文简化了类型安全功能，直接提供基础的实现，以展示如何从 StoreService 中获取状态。通过一个闭包和 map 操作符，select 函数实现了从 StoreService 获取数据并应用到模板中的逻辑。

       StoreService 实现中的 createSelector 提供了一个从所有 selectors 的结果中分离特定 selector 的工具，简化了状态的获取与展示。

       在实际应用中，将 StoreService 注入到 Angular app 的组件中，通过 ngOnInit 生命周期钩子获取状态并将其结果显示在模板中。组件中包含 dispatch 功能，实现与 NgRx Store API 类似的操作。

       本文源代码已提供，欢迎阅读与学习。如有任何问题或建议，欢迎直接联系作者。