前言

最近在做專案的時候發現一個實體不能夠滿足專案的需求了，需要多個實體巢狀在一起，由於自己原來做的都是一些簡單的操作，突然要實現多個實體的巢狀，這可是有點難住我了，不過成長都是在探索中，下面就讓我們一起來看看如何實現吧。

敘述

實體的巢狀

所謂實體的巢狀，就是多個實體巢狀在一起，一個實體中例項化另外的一個實體。

實體的例項化

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;
  }

結果展現

小結

原理很簡單，重要的是要知道如何去實現。
感謝您的閱讀~