皮皮网

1.angular8？
2.angular如何集成monaco-editor
3.angular.min.js和angular.js的码安区别是什么？
4.将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
5.[译] 关于 Angular 的变化检测，你需要知道的码安一切

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如何集成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方式，都涉及了必要的配置和最佳实践。希望这些信息对您的项目集成有所帮助。

angular.min.js和angular.js的区别是什么？

       angular.min.js 是压缩版的angular.js,主要是删除了注释，去除了所有的回车和空格，也对函数变量等做了缩写处理，在使用上没有任何区别，但是压缩版比较小，在正式环境中，越小的js文件，可以保证网站越快的被打开

将BootstrapJS和AngularJS结合使用以及为什么不用jQuery

       äº²ï¼Œä½ æ€Žä¹ˆå¾—到这个命题的？

       bootstrap是一个面向css的框架，由于css功能限制，所以一些特性必须依赖JS完成。

       angularJS是前端的mvc框架，使前后端彻底分离成为可能。

       jQuery是一个js框架，封装了常用的dom操作、特效、插件等。

       é¦–先，这三者完全不排至，其次，如果是通过工具部署angularJS的时候，默认情况下会包含这三者都是放在源码包中的，所以不知道你的命题是怎么得到的。

       è¿™ä¸ªæˆªå›¾ä¸­çš„源码是使用yo生成器自动部署的，三合一。

       æˆ–者你没搞清楚问题？angularJS封装了$ponent 属性与对应的组件类关联。所有操作在视图中执行，包括属性检查和 DOM 更新。登录源码6因此，从技术角度来看，更准确的说法是 Angular 应用是一颗视图树。组件可以视为视图的更高阶概念。源码中对视图有如下描述：

       视图是应用 UI 的基本组成元素，由一组在创建和销毁时共同存在的最小集合构成。视图的属性可以改变，但元素结构（数量和顺序）不能改变。想要改变元素结构，只能通过 ViewContainerRef 插入、移动或移除嵌入的视图。每个视图可以包含多个视图容器。

       在本文中，我们将交替使用“组件视图”和“组件”概念。

       值得注意的是，网络上有关变化检测的文章和 StackOverflow 回答中的“视图”常被称作变化检测器对象（Change Detector Object）或 ChangeDetectorRef。实际上，变化检测并非独立对象，而是在视图上运行的。

       每个视图通过 nodes 属性关联子视图，以便对子视图进行操作。

       视图的状态

       每个视图都有一个 state 属性，这是极其重要的属性，决定了是loadash源码分析否对视图及其所有子视图执行变化检测。state 属性有多种可能的值，与本文相关的有：

       如果ChecksEnabled 为 false 或视图状态为 Errored 或者 Destroyed，变化检测将跳过此视图及其所有子视图。默认情况下，所有视图均以 ChecksEnabled 作为初始值，除非使用了 ChangeDetectionStrategy.OnPush。

       Angular 中有许多高级概念用于操作视图。在文章中已提及部分概念，如 ViewRef。它封装了组件视图并提供了一个名为 detectChanges 的方法，该方法会在异步事件触发时在最顶层的 ViewRef 上执行变化检测。最顶层的 ViewRef 执行变化检测后，会递归地对其子视图执行检测。

       通过 ChangeDetectorRef 令牌将 viewRef 注入组件构造函数中，可以实现此操作：

       从其定义可知这一点：

       变化检测操作

       执行变化检测的主要逻辑在 checkAndUpdateView 方法中，该方法主要针对子组件视图执行操作，并递归地调用此方法以遍历从宿主组件到所有组件的所有视图。这意味着，下一次递归中，子组件就成为了新的父组件。

       执行变化检测的主要步骤如下：

       有几个关键点需要注意：

       首先，子组件在子视图被检测之前会触发onChanges 生命周期钩子，即使子视图的变化检测被跳过了。这一点至关重要，源码之家前台后续部分将展示如何利用这一点。

       第二，当检测视图时，更新视图的 DOM 是变化检测机制的一部分。因此，如果组件未被检测，DOM 将不会更新，模板中的组件属性发生改变时也是如此。在第一次检测之前，模板已被渲染。这里所说的更新 DOM 指的是更新插值。例如，some { { name}}，在第一次检测之前，已经将 DOM 元素 span 渲染好。检测过程中，只会渲染 { { name}} 部分。

       另一个有趣的是，子组件视图的状态可以在变化检测过程中改变。所有组件视图默认初始化为 ChecksEnabled。但是，使用 OnPush 策略的组件在第一次检测后不再执行变化检测（步骤第 9 步）。OnPush 文档说明，只有绑定发生变化时才会执行检测。因此，需要将 ChecksEnabled 位设置为启用检测（步骤第 2 步操作）：

       只有当父视图绑定发生变化，且子组件视图初始化为 ChangeDetectionStrategy.OnPush 时，才会更新状态。

       最后，当前视图的变化检测负责启动子视图的变化检测（步骤第 8 步）。以下是相关的代码：

       现在你知道了视图状态控制了是否对此视图及其子视图进行变化检测。那么问题来了——我们能控制这个状态吗？答案是可以，这也是本文第二部分将探讨的内容。

       有些生命周期钩子在更新 DOM 前调用（步骤 3、4、5），有些在之后（步骤 9）。例如，组件结构为 A -> B -> C，它们的生命周期钩子调用和更新绑定的顺序是：

       总结

       假设我们有如图所示的组件树，根据前面所述，每个组件都有一个与之关联的视图。每个视图初始化为 ViewState.ChecksEnabled，这意味着 Angular 进行变化检测时，树中的每个组件都会被检测。

       如果我们希望禁用 AComponent 及其子组件的变化检测，只需将 ViewState.ChecksEnabled 设置为 false。由于状态操作是低级操作，Angular 提供了许多视图的公共方法。每个组件都可以通过 ChangeDetectorRef 令牌获取关联的视图。Angular 文档定义了该类的公共接口：

       接下来，我们将探讨如何使用这些接口。

       detach

       detach 允许我们操作状态，它可以对当前视图禁用检查：

       在代码中实现如下：

       这确保了接下来的变化检测中，从 AComponent 开始，左子树的所有组件都会被跳过（橙色的组件不会被检测）：

       需要注意的是，改变的是 AComponent 的状态，其所有子组件都不会被检测。第二点是，由于整个左子树的组件都不执行变化检测，它们模板中的 DOM 也不会更新。以下例子简要描述了这种情况：

       当组件首次被检测时，span 将被渲染为“See if I change: false”。两秒后，changed 属性变为 true，但 span 中的文字不会更新。然而，如果去掉了 this.cd.detach()，就会按照预期更新。

       reattach

       如第一部分所述，如果 AComponent 的输入绑定 aProp 发生变化，AComponent 的 Onchanges 生命周期钩子就会被触发。这意味着一旦得知输入属性发生变化，即可启动当前组件的变化检测器来检测变化，然后在下一个周期将其分离。以下是实现此功能的代码片段：

       由于reattach 只是简单地设置 ViewState.ChecksEnabled 位：

       这与将 ChangeDetectionStrategy 设置为 OnPush 的效果相似：在第一次变化检测后禁用检测，当父组件绑定的属性发生变化时启用，检测完之后再次禁用。

       需要注意的是，OnChanges 钩子仅在禁用检查的子树的最顶端组件触发，子树中的其他组件不会触发。然而，我们可以通过这个钩子执行自定义逻辑，然后将组件标记为可以执行一次变化检测。由于 Angular 只检测对象引用，我们在此可以检查对象的属性：

       markForCheck

       reattach 方法仅对当前组件启用检测，如果父组件未启用变化检测，效果有限。我们需要一个能够检测所有父组件直到根组件的方法，这个方法就是 markForCheck：

       从代码中可以看出，它仅向上迭代直至根节点，使所有父组件都启用检查。

       何时使用这个方法？与 ngOnChanges 一样，在使用 OnPush 策略时也会触发 ngDoCheck 生命周期钩子。再次强调，只有禁用检查的子树的最顶端组件会触发，子树中的其他组件都不会触发。但是，我们可以通过这个钩子执行一些自定义逻辑，然后将组件标记为可以执行一次变化检测。由于 Angular 只检测对象引用，我们在此可以检查对象的属性：

       detectChanges

       有一种方法可以对当前组件和所有子组件执行一次变化检测，这就是 detectChanges 方法。此方法会对当前组件视图执行变化检测，不管组件的状态如何。也就是说，视图仍会禁用检测，并且在接下来常规的变化检测中，不会检测此组件。例如：

       尽管变化检测器引用仍保持分离，但 DOM 元素仍会随着输入绑定的变化而变化。

       checkNoChanges

       这是变化检测器的最后一个方法，主要作用是确保当前执行的变化检测中，没有变化发生。简单来说，它执行本文第一部分提到的列表中的第 1、7、8 步。如果发现绑定发生变化或 DOM 需要更新，会抛出异常。

       还有疑问？

       若对本文有任何疑问，欢迎在 Stack Overflow 上提问，并在本文评论区贴上链接。这样整个社区都能受益。感谢。

       关注我以获取更多资讯

       若发现译文存在错误或其他需要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可获得相应奖励积分。本文永久链接即为本文在 GitHub 上的 MarkDown 链接。

       掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、 iOS、 前端、 后端、 区块链、 产品、 设计、 人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、 官方微博、 知乎专栏。