Angular6.x 实战开发总结

         最近的一段时间，撸了一些前端的东西，对于前端开发有了一些新的认识，下面主要针对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，否则页面切换时会夹带不必要的排序错误。    

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

标签：实战,总结,name,sessionStorage,id,Angular6,user,data,queryParams
来源： https://blog.csdn.net/yalishadaa/article/details/90213386