4个常见的Angular错误以及如何解决它们？

2018-07-03 08:55:00 愛碼農

在本文中，我们将讨论Angular bugs的几个常见原因，以及开发者如何在代码中远离他们。

有Angular开发人员在他们的应用程序中经常会遇到错误，这使得他们诅咒框架，并为他们的游戏机上一些神秘的红线感叹。

但是，由于Angular通用性强，速度快且针对各种平台进行了优化，因此在使用它构建动态单页应用程序时不应该感到沮丧。

例如，来自美国的经验丰富的Angular开发人员Mdixon使用实际项目来教导开发人员如何避免代码错误，他说：“遵循最佳编程习惯是防止Angular应用程序出现错误的最佳方式，用它。”

在这篇文章中，我将要谈论角虫和缺陷的四种常见原因，以及如何远离它们（如瘟疫！）。

1.术语混乱

Angular通常指Angular v2及以上版本，不应与其前身AngularJS混淆。

Angular并不只是指新版本的AngularJS; 它是原始框架的重写。

现在，AngularJS引用了框架的第1版。而从版本2开始的更高版本在没有“JS”的情况下被称为Angular。

该框架的最新版本Angular v6于2018年5月发布。第7版计划于年底前发布。

术语上的这种混淆通常会导致开发人员在使用框架构建应用程序时错误地误解概念的实现，特别是在团队中进行协作时。

所以，为了避免Angular bug，你需要知道你正在处理的版本。

2.错误地使用模块

被称为的角度模块NgModules可以让你组织你的应用程序，从而实现你的目标 - 从头到尾。

但是，如果使用不当，这些模块可能会成为令人心痛的原因，从而削弱您的开发工作。

从一开始，您应该创建一个根模块。随着应用程序的不断发展，此模块扮演了将其他模块拉到一起的重要角色。

如果您不包含它，则以后整合其他功能可能会出现问题并容易出错。

此外，随着您的应用程序的增长，您应该确保只导入正确和必要的模块。

导入不熟悉的模块会增加应用程序中的错误。

例如，如果要在Web浏览器上部署应用程序，则需要导入BrowserModulefrom @angular/platform-browser，并将其列入@NgModuleimports 数组中。

这里是一个例子：

/* Correctly importing modules so that AppModule can use them */
import{BrowserModule}from'@angular/platform-browser';
import{NgModule}from'@angular/core';
import{AppComponent}from'./app.component';
@NgModule({
declarations: [
AppComponent
],
imports:[/* remember to include modules here to avoid Angular bugs */
BrowserModule,
],
providers:[],
bootstrap:[AppComponent]
})
exportclassAppModule{ }

您只应导入您需要的模块; 否则，您将不必要地膨胀应用程序的大小并降低其性能。

3.不正确的命名

不遵守正确命名实践的角色开发人员经常会出现容易出错和难以调试的应用程序。

如果遵循正确的命名约定，您将减少命名冲突，不一致的引用和非生产性协作。

以下是您可以做的一些事情，以阻止您的Angular应用程序中与命名相关的错误：

命名文件夹和文件以展示其用途，无需猜测。例如，app/users/users-list.component.ts可能指的是管理用户列表的应用程序组件。
在整个Angular应用程序中使用一致的命名方法。例如，您可以采用一种技术，首先命名组件的功能，然后命名其类型（feature.type.ts） - 如命名文件 app.component.ts。
命名课程时，使用传统的上骆驼案例。这样，它表明这些类可以实例化并构建为实例。

/* avoid */
export class userslist {
constructor() { }
}
/* recommended */
export class UsersList {
constructor() { }
}

4.直接改变DOM

另一个困扰Angular应用程序的常见错误是直接改变DOM。

除了被认为是不好的做法之外，这个错误还会让你的Angular应用程序在浏览器以外的平台上运行不畅。

这是一个直接改变DOM的例子：

@Component({...})
exportclassBugComponent{
constructor(private _elementRef:ElementRef){}
getAngularBugs(){
$('.bug-in-jquery').click();
this._elementRef.nativeElement.abc ='bug in native element';
document.getElementById('bug-in-document');
}
}

从上面的代码可以看出，该getAngularBugs函数演示了三种直接与DOM交互的方式：使用jQuery ElementRef.nativeElement，和全局文档对象。但是，这种方法会让您的应用程序容易出错。

要在Angular中改变DOM并避免错误，请使用Renderer2服务（在v4及更高版本中提供）。

Renderer2带有各种方法来改变一个元素，就像JavaScript DOM API一样。您可以在官方的Angular 文档中了解更多关于它的用法。

以下是如何使用该服务与DOM进行交互的示例：

@Component({...})
exportclassBugComponent{
constructor(private _renderer2:Renderer2,
private _elementRef:ElementRef){}
avoidAngularBugs(){
this._renderer2.setElementProperty(this._elementRef,'add-property-here',true);
}
}