Angular6.x 实战开发总结

拼搏现实的明天。 2022-02-01 14:41 235阅读 0赞

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

**1. 实现返回功能：**

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

尽量使用路由而不要使用history.back()方法。

**2.对于angular material组件**，

<button mat-flat-button color="primary" [mat-dialog-close]="object" [disabled]="!objectForm.valid" >{
       {getTranslateKey('save') | translate }}</button>

当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);
        (<any>window).sessionStorage.setItem("user-id", data.id);
        (<any>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) => {
            (<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 = (<any>window).sessionStorage.getItem("flag") == "true";

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

ngOnDestroy() {
        (<any>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，否则页面切换时会夹带不必要的排序错误。**

前端知识对于现在的后端开发人员已经不是必学技能，但那并不意味着前端的知识对于我们毫无用处，在现在前后端分离的环境下，了解一些前端的知识能够使我们更好的理解前端开发人员的需求，提升效率。