【angular】多个实体的嵌套

#前言

---

最近在做项目的时候发现一个实体不能够满足项目的需求了，需要多个实体嵌套在一起，由于自己原来做的都是一些简单的操作，突然要实现多个实体的嵌套，这可是有点难住我了，不过成长都是在探索中，下面就让我们一起来看看如何实现吧。
#叙述

实体的嵌套

所谓实体的嵌套，就是多个实体嵌套在一起，一个实体中实例化另外的一个实体。

实体的实例化

export class AddPage {
  leftPage = new LeftPage();   //左
}

export class LeftPage {
  processId: string;
  createdId: string;
  parentPageModel = new ParentPageModel();   // 一级页签
}

// 一级页签
export class ParentPageModel {
  commonPageMap = new Array<CommonPageMap>();  //通用页面名称实体集合
  pageMap = new Array<PageMap>();  //自定义页面名称实体集合
  pageModelLevel: string; //页签层级
  screenType: string;   //页面位置
}

// 一级页签中自定义页面名称的实体,id不用前端传递
export class PageMap {
  id: string;
  name: string;
  type: string;
  des: string;

}

// 一级页签中通用页面名称的实体
export class CommonPageMap {
  id: string;
  name: string;
  type: string;
  des: string;

}

实体应用

 //大model
  public addPageModel: AddPage = new AddPage(); 

  // 一级页签通用页面名称集合-接收控件获取数据  
  public commonPageNameMap = new Array();

  // 一级页签通用名称实体  
  public pageMap = new PageMap();

  // 一级页签自定义页面名称实体
  public commonPageMap = new CommonPageMap();
  @Input()
  processId: string;
  submit() {
    /**
     *单屏单级：在addPageModel中仅有parentPageModel有值，其余为空
     */
    // ---------------------流程ID和创建人-------------------------------------------------------------
    this.addPageModel.leftPage.createdId = '张张';
    // 预览id
    this.addPageModel.leftPage.processId = this.processId;

    console.log('预览ID对吗？');

    console.log(this.processId);

    /**
     *-------------------自定义：描述、层级、名称、类型，名称为一个数组，数据中仅包含名称，名称对应的ID由后端自行生成
     */
    // --------------------自定义页面----------------------------------------------------------
    // this.addPageModel.leftPage.parentPageModel.screenType = '左';
    // this.addPageModel.leftPage.parentPageModel.pageModelLevel = '一级';
    // 一级中自定义页面名称的获取
    this._submitForm().forEach(
      el => {       
        this.addPageModel.leftPage.parentPageModel.pageMap.push({ id: null, name: el, type: '自定义页面', des: this.pageMap.des });
      });
    console.log('自定义model:' && this.addPageModel.leftPage.parentPageModel.pageMap);

    // 通用页面名称的获取
    this.commonPageNameMap.forEach(
      item => {
        this.addPageModel.leftPage.parentPageModel.commonPageMap.push({ id: item.id, name: item.modelName, type: '通用页面', des: this.commonPageMap.des });
      }
    )
    console.log('通用model:' && this.addPageModel.leftPage.parentPageModel.commonPageMap);
    
    let body = JSON.stringify(this.addPageModel);
    console.log('最后添加的流程节点与页面绑定的model——' && this.addPageModel);

    let url = 'work/ProcessPageConfigController/addPageModel';
    this.http.post(url, body).subscribe(
      res => {

        if (res.json().code == '20000') {

          console.log(res.json().msg);
          this.successInfo = '流程节点与页签配置信息提交成功';
          this.success()

        } else {
          this.errorInfo = '流程节点与页签配置信息提交失败';
          this.error();
        }
      }
    )
  }

 // 一级自定义页面名称集合
  public addSubPage = new Array();
  _submitForm() {
    console.log('第一次');
    console.log(this.validateForm.controls)
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.addSubPage.push(this.validateForm.controls[i].value);
    }
    console.log('自定义页面名称集合：' && this.addSubPage);
    return this.addSubPage;
  }

---

结果展现

#小结
原理很简单，重要的是要知道如何去实现。
感谢您的阅读~