皮皮网

1.[Angular 组件库 NG-ZORRO 基础入门] - 源码初窥: core
2.angular如何集成monaco-editor
3.angular8？
4.ng-zorro-antd中踩过的坑

[Angular 组件库 NG-ZORRO 基础入门] - 源码初窥: core

       在探索和了解了典型组件的源码之后，我们进一步深入 NG-ZORRO 组件库的核心结构，发现了一个关键的策略来解决组件间共用属性、功能导致的重复编写问题。NG-ZORRO 支持近 种组件，为避免每种组件都需要重复定义相同的app源码求购属性或功能，开发团队采用了将公共方法和定义抽离至 `core` 文件夹的策略。

       当处理组件的通用属性时，我们发现像 `nzSize` 这样的属性在多个组件如 `Input` 和 `Button` 中被广泛使用。解决这一问题的方法在于引入 `types` 文件夹，这个文件夹记录了哪些组件支持特定属性，便于我们查询和重复利用。

       动画效果是张帆指标源码 Angular 开发中常见的元素，Angular 官方文档提供了详尽的指南。NG-ZORRO 提供了多样化的动画，使页面元素呈现丰富的动态变化。例如在 `Collapse` 折叠面板组件中，通过 `nzActive` 属性操控动画状态，实现元素的展开与收起效果。这一功能在实际开发中非常实用，使用动画使页面交互更加直观。

       某些组件，如 `Tag`，在其动态删除操作中应用了淡入淡出动画，该动画机制相较于需要单独配置的红盟源码状态传递更为简便，直接提升视觉效果和用户体验。NG-ZORRO 内含多种动画类型，如 `moveUpMotion` 和 `slideMotion`，通过探索源码可以轻易找到使用方式。

       对于不希望使用动画的场景，NG-ZORRO 提供了 `NzNoAnimationDirective`，允许开发者在模板层面对特定元素禁用动画效果。通过替换 `BrowserAnimationsModule` 为 `NoopAnimationsModule`，可实现全局禁用动画。

       总结这一系列核心文件夹——`core` 包含了如 `types` 和 `animations` 等内容，对于项目开发而言，应考虑抽离公共部分，nft抢购源码实现跨组件复用，以减少代码冗余和提高开发效率。通过借鉴 NG-ZORRO 的实践，开发者可以优化代码结构，提升组件复用性，同时保持代码的简洁性和易维护性。

angular如何集成monaco-editor

       在进行前端开发时，如果需要集成高级代码编辑器，monaco-editor是一个理想的选择。本文将分享如何在Angular环境中成功集成monaco-editor，并解释其背后的原理和不同集成方式。

       基础配置

       通常，mustache源码解读第三方库通过npm安装并导入即可使用。然而，monaco-editor因其动态加载模块支持多种语言的特性，需要特殊处理。monaco-editor提供AMD和ESM两种包格式，它们的区别如下：

       AMD：异步加载模块标准，适合浏览器和异步加载场景，用define和require实现，可能需要额外的RequireJS库支持。

       ESM：ECMAScript模块标准，静态加载，import和export操作，现代浏览器和Node.js原生支持，无需额外库。

       Angular集成

       根据monaco-editor的包类型，Angular的集成方式分为两种：

       AMD方式：在angular.json中配置资源路径，通过service管理模块加载。可以使用@monaco-editor/loader简化这一过程，它能从CDN获取或配置为本地资源。

       ESM方式：使用webpack进行配置，推荐使用@angular-builders/custom-webpack或ngx-build-plus，官方提供了monaco-editor-webpack-plugin，但个人建议避免直接操作webpack配置。

       另一种选择是使用封装好的组件库，如nz-zorro-antd的实验性code editor组件，它内含monaco-editor的实现，无需自己编写代码，可以直接查看其源码。

       总结

       本文分享了将monaco-editor融入Angular项目的详细步骤，无论是AMD还是ESM方式，都涉及了必要的配置和最佳实践。希望这些信息对您的项目集成有所帮助。

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等这些方法后，需要注意内存泄漏的问题。

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

ng-zorro-antd中踩过的坑

       在前端开发过程中，我们常常会借助阿里开源的组件库ant-design，它提供的组件功能强大，能满足大多数需求，直接使用即可，非常便捷。当然，一些公司会对此进行二次开发，以打造具有独特风格的产品。

       本文将不涉及高深的技术细节，也不深入探讨底层源码，仅分享一些在项目中遇到的小问题。

       表格（table）——师傅以为是组件库的bug，没想到……

       不知道正在阅读本文的读者是否遇到过这样的情况：

       这个空状态怎么总是和我们作对呢？为什么就不能满足我们的预期呢？其实，它偶尔也会满足我们的要求。

       出现这种问题的原因实际上非常简单。回想一下，我们在删除和添加表项时，是否是这样操作的：

       看起来这段代码没有问题，但要知道的是，push()和splice()这两个函数是直接在原始数组上操作的，会改变原数组。然而，它们会改变数组的引用吗？答案是：不会。

       在angular的设计中，onChanges()监听的是哪种变化呢？是引用。

       因此，只要我们改变引用地址，就可以解决这个问题。

       这里提供的方法简单、快速、有效，非常实用。

       读完本文，你是否有一种豁然开朗的感觉呢？