angular?!小白修仙之路……

深碍√TFBOYSˉ_ 2022-06-05 09:56 256阅读 0赞

**一、   简介**

Angular是一个功能非常完备的前端框架，最早由 Misko Hevery 等人创建，2009 年被Google 公式收购，用于其多款产品。Angular基于TypeScript，通过增强HTML的方式提供一种便捷开发Web应用程序的方式。

这里主要介绍在angular开发使用后的一些经验总结，还有踩过的坑。

# 二、典型功能 #

## 1、绑定 ##

绑定是一项很好用的功能，也是angular的特点之一。

（1）  事件绑定

（2）  属性绑定

（3）  Class绑定

<div \[ngClass\]="\{number>3?divClass1:divClass2\}"></div>

（4）  样式绑定

<div \[style.color\]="\{number>3?red:green\}"></div>

（5）  双向绑定

<label">\{ \{name\}\}</label>

## 2、 Form表单验证 ##

Angular的form表单提供了简单方便的验证方法，及样式控制，这里举个简单的例子。关键部分是\#addForm和\#name

<div>

<formclass="form-inline" \#addForm="ngForm">

<divclass="form-group">

<labelfor="name"class="control-label"><spanstyle="color:red;">\*</span>名称：</label>

<inputclass="form-control" \[(ngModel)\]="form.name"required \#name="ngModel"/>

<div \[hidden\]="name.valid|| name.pristine"class="alertalert-danger">名称不能为空</div>

</div>

</form>

<buttontype="submit"class="btnbtn-ok" (click)="saveName()"  \[disabled\]="!addForm.form.valid">保存</button>

</div>

## 3、管道使用 ##

管道是一个很好用的功能，可以多页面公用处理方法，使用简单。可以使用angular内置管道，也可以自定义管道

<span>\{ \{status |statusPipe\}\}</span>

自定义管道方法

import \{ Pipe, PipeTransform \} from'@angular/core';

@Pipe(\{

name:'statusPipe'

\})

exportclassStatusPipePipeimplementsPipeTransform \{

transform(value:any, args?:  any):any \{

lettransVal ='';

switch (value) \{

case'activated':

transVal ='已激活';

break;

case'unactivated':

transVal ='未激活';

break;

returntransVal;

## 4、路由 ##

路由有很多配置参数，这里只举例路由传参 /login/1?name=1

页面中路由跳转

<a \[routerLink\]="\['/login',1\]"\[aueryParams\]="\{name:1\}"target="\_blank">login</a>

Ts中路由跳转

this.router.navigate(\['login',1\],\{ queryParams: \{ name: 1 \} \});

## 5、拦截器 ##

Web项目中发送请求是比不可少的，一般使用统一的http请求服务，对请求进行统一的拦截处理是一个常用操作。

post (url:string, params?:  any) \{

url = this.getUrl(url);

returnthis.http.post(url,params)

.toPromise()

.then(this.intercept) // 使用拦截器

.catch(this.handleError);

//  拦截器

privateintercept(res :any)\{

if (res\["\_body"\].indexOf("noright") > 0) \{

alert("没有权限访问");

\}else\{

returnres.json();

## 6、组件通信 ##

组件是Angular的一个特色，组件的使用方便了代码复用。Angular提供了组件直接通信的方法。

父组件属性count传给子组件，子组件方法save返回父组件。

<divclass="parent">

<app-child \#childComponent \[count\]="count" (save)="onSave($event)"></app-child>

</div>

子组件使用@Input、@Output来进行通信。通过@Input获取父组件count值，通过@Output将数据传递给父组件。

exportclassChildComponentimplementsOnInit  \{

@Input()privatecount:number;

@Output()save: EventEmitter<any> =newEventEmitter();

privatename:string;

saveCall(event:any) \{

this.count\++;

that.save.emit(this.count);

edit() \{

this.count=5;

父组件在onSave方法接收子组件传递过来的值，另外父组件也可以使用ViewChild调用子组件属性和方法。

exportclassParentComponentimplementsOnInit  \{

@ViewChild('childComponent')childComponent:ChildComponent;

ngOnInit() \{

this.childComponent.name='Lily';

this.childComponent.edit();

//  保存回调

onSave(data:any) \{

console.log(data);

# 三、踩坑经验 #

## 1、 typescript中this和javascript function 中的this冲突 ##

在javascriptfunction中调用typescript中方法，导致this指向并不是我们原始的this问题，原因是 js的代码作用域影响，可以通过下面方法解决。

letthat =this; //重要

//  使用that指向typescript中方法

## 2、 F5刷新跳转首页 ##

在angular中路由到某个页面，例如/data，在当前页面刷新，我们期望的是当前页面，实际却跳转到了首页/home。通过设置useHash参数解决，但是url中会增加\#号，例如\#/home，\#/data

RouterModule.forRoot(appRoutes, \{ useHash:true\})

## 3、动态显示后端HTML ##

在Web前端开发中，我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示，angular提供了内置指令\[innderHtml\]="htmlContent"实现，但是htmlContent中带有的style样式会被过滤。原因是angular自身有一套安全过滤系统，我们必须为html标签添加信任，才能正常显示。解决方法是使用angular服务DomSanitizer中的[bypassSecurityTrustHtml ][bypassSecurityTrustHtml]方法

前端：

<div \[innerHTML\]='testHtml'></div>

后端

![Center][]

到这里已经解决问题了。为了不影响源数据和批量使用，可以封装成管道，这样各页面和数据都不用修改，只在前端使用管道即可。

![Center 1][]

## 4、 第三方库引入 ##

第三方库引入angular后，有时候会出现加载不出来或者函数不识别、显示不正确等问题，可能有以下三方面的原因：没有声明，页面元素display为none，dom不存在。

第三方库引入后需要声明，例如

declarevarecharts:any;

有些js加载时要求页面元素display不能为none，如果需要控制显示隐藏，可以使用ngIf，不要通过display实现。

<divstyle="display:none"></div>

有时候第三方js在页面中不能正常显示，主要是angular的动态加载引起的，因为js加载时页面元素不存在。如果需要在弹窗或者动态生成的元素中加载，可以通过onShown回调或者setTimeout延迟加载，等dom存在之后初始化js就可以正常显示了。

# 四、体验评价 #

Angular功能很强大，而且使用非常灵活，也很方便集成。缺点是性能，库比较大，页面响应慢。还有一点就是，angular版本变化快，学习曲线陡峭，在开发效率方面需要注意。

![Center 2][]

![Center 3][]

[bypassSecurityTrustHtml]: https://angular.cn/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html#bypassSecurityTrustHtml-anchor
[Center]: /images/20220605/689a37b2e062439ea90ca0689b96735d.png
[Center 1]: /images/20220605/88095b14abb047128851d15dd62f5fe3.png
[Center 2]: /images/20220605/343a133bc2a943a5baab1695e074013f.png
[Center 3]: /images/20220605/d12d6b57d6cf4633a7eab27419c70c4e.png