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

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

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

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

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

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

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

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

angular如何集成monaco-editor

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

       基础配置

       通常，分类信息小程序源码第三方库通过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()监听的是哪种变化呢？是引用。

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

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

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