Angular6.x 实战开发总结 Angular

最近的一段时间，撸了一些前端的东西，对于前端开发有了一些新的认识，下面主要针对Angular(主要是2.0以后的版本)这个开发框架来对前端的知识点进行一些简单的总结:
1. 实现返回功能：

private goBack() { this.router.navigate(["../controllerinfo"], { relativeTo: this.route }); }

尽量使用路由而不要使用history.back()方法。
2.对于angular material组件，

当button上绑定:[mat-dialog-close]="object"的时候，点击button，对应的数据就会绑定到object上。

3.一个页面向另外一个页面上传递参数

页面A点击按钮之后向页面B传递几个参数：

openUpdateWin(id: string) { this.service .getById(id) .then((res: any) => { this.router.navigate(["./update"], { relativeTo: this.route, queryParams: { type: "1", id: id, groupType: groupType, name: name, desc: desc, audited: audited } }); }) .catch(err => { if (err.error.code) { const ErrorInfo: ErrorInfoComponent = new ErrorInfoComponent( this.translate ); this.dialogSrv.openAlertDialog({ data: { tip: ErrorInfo.getErrorInfo(err.error.code) } }); } }); }

在页面B的constructor()函数中可以直接从queryParams获取:

constructor() { super("xxx", xxx); this.route.queryParams.subscribe(queryParams => { this.id = queryParams.id; this.type = queryParams.type; this.groupType = queryParams.groupType; this.name = queryParams.name; this.desc = queryParams.desc; this.name = queryParams.name; this.groupAudited = queryParams.audited === "true"; }); }

上述的解决方法只能传递字符串类型的数据，假如我们需要传递一个对象呢?
这时候我们只能通过一个service来中转一下数据:

A页面中通过a.service中存入了用户信息:

private jump(data: userModel) { this.extraParamSvc.setExtraParam({ id: data.id, name: data.name }); let user: userModel = data; this.singleUserServ.setUserParam(user); (window).sessionStorage.setItem("user-id", data.id); (window).sessionStorage.setItem("user-name", data.name); this.router.navigate(["/user/management/user/" + data.id], { relativeTo: this.route }); }

然后，在B页面中通过b.service中获取存入的用户信息:

private setPageHeader() { let userName = ""; if (this.userService.getUserParam()) { userName = this.userService.getUserParam().name; }this.titleSvc.setPrivateTitle( this.getTranslateValue("modifyObjgroupPageHead", { userName: userName }) ); }

4.使用sessionStorage来存放临时数据
在A.component中将标志位存储到sessionStorage中:

update(userModel: userModel) { this.userService .getUserById(userModel.id) .then((res: any) => { (window).sessionStorage.setItem("flag", false); this.router.navigate(["../updateUser"], { relativeTo: this.route, queryParams: { user_id: userModel.id, isWritable: this.isWritable } }); }) .catch(err => { if (err.error.code) { const ErrorInfo: ErrorInfoComponent = new ErrorInfoComponent( this.translate ); this.dialogSrv.openAlertDialog({ data: { tip: ErrorInfo.getErrorInfo(err.error.code) } }); } }); }

然后在B.component中读取:

const flag = (window).sessionStorage.getItem("flag") == "true";

当然，为了节省资源，当页面关闭销毁时，注意资源的释放:

ngOnDestroy() { (window).sessionStorage.removeItem("flag"); }

5. 如何设置angular项目的内存
项目规模越来越大，很容易就出现outOfMemory异常，这时候根据需要手动设置项目的运行内存大小:
修改项目目录下的:
node_modules\.bin\ng.cmd文件:

@IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe --max_old_space_size=8192""%~dp0\..\@angular\cli\bin\ng" %* ) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:; .JS; =; % node --max_old_space_size= 30702 "%~dp0\..\@angular\cli\bin\ng" %* )

根据需要设置max_old_space_size的大小。

6. 多个Tab页签进行切换时不要使用同一个LazyLoadEvent，否则页面切换时会夹带不必要的排序错误。
【Angular6.x 实战开发总结】前端知识对于现在的后端开发人员已经不是必学技能，但那并不意味着前端的知识对于我们毫无用处，在现在前后端分离的环境下，了解一些前端的知识能够使我们更好的理解前端开发人员的需求，提升效率。