乐趣区

关于typescript:状态模式

jiezi

在新的我的项目中要变更编辑、新增的形式，之前始终是把列表组件和编辑、新增组件放在同一位置来做的，即是兄弟组件的关系，这样尽管能够解决问题，然而每次跳转回列表页面都会从新进行查问，也就是说咱们很有可能看不到咱们所编辑的那一项，不直观。
所以在新我的项目中要将编辑、新增组件作为子组件来应用，从而使其更加直观。

状态模式：
状态模式是一种行为设计模式，让你能在一个对象的外部状态变动时扭转其行为，使其看上去就像扭转了本身所属的类一样。

与事实类比：
手机的开机键会依据不同状态实现不同行为。
手机处于解锁状态时，按下按键将熄屏。
手机处于熄屏状态时，按下按键将提醒须要解锁。
手机处于电量有余时，按下按键将提醒须要充电。

先来说一下规范的状态模式是什么：

流程很简略，就是申明一个状态类而后对其进行实现，而后再在用户所用的类中进行调用，依据不同的状态执行不同的办法。

对于批改编辑组件和列表组件的关系的问题发现在原先我的项目中曾经就能够做到批改之后实时反馈到父组件中并且查问条件不扭转。
批改前：

批改后：

如果咱们不想以这种弹出框的模式解决能够进行以下批改：
将弹出框改为 div 模式，并且当 showBatchEdit 为 false 是展现 index 界面，当 showedit 为 true 时只展现 edit 界面。

<div [formGroup]="queryForm" *ngIf="!showBatchEdit">
//index
...
</div>
<div *ngIf="showBatchEdit">
//edit
  <div class="container-md p-3">
    <app-edit [vehicleBrand]="editVehicleBrand"
              (beSubmit)="onBatchEditSubmit($event)"
              (beClose)="onBatchEditClose()"></app-edit>
  </div>
</div>

然而这样做的话又呈现一个新的问题，尽管以弹窗的模式下没有问题，可是改成此款式之后如果咱们编辑的是第二页，提交后又会跳会第一页。
打断点进行测试后发现如果应用 ngif 进行实现的话返回到主页面又会执行一次onPageChange，并且猜想是因为库中函数的起因，再次调用时会间接弹射给 index 组件 page=0,

  <yz-page (changePage)="onPageChange($event)"
           [page]="pageData.number"
           [size]="pageData.size"
           [totalElements]="pageData.totalElements"></yz-page>

进而像上面这样，index 接管到弹指

graph TD
    A[index 组件接管到弹值 page=0] --> B(onPageChange)
    B --> C(reload)
    C --> D(将参数转换为路由参数, 更改路由)
    D --> E(触发对路由的订阅)
    E --> F(再次进行分页查问返还首页后果)
ngOnInit(): void {console.log('ngoninit');
    . . .
    this.route.queryParams.subscribe((params: { page?: string, size?: string}) => {this.vehicleBrandService.page(. . .)
    . . .
        }
    }
  onPageChange(page: number): void {console.log('page');
    this.reload({...this.params, ...{page}});
  }
  
reload(params: Params): void {console.log(params);
    // 将参数转换为路由参数
    const queryParams = CommonService.convertToRouteParams(params);
    this.router.navigate(['./'],
      {
        relativeTo: this.route,
        queryParams: queryParams,
      }).then();}

于是为了进一步确认想法是否正确，又在 onSizeChange()处打断点，发现编辑后返回 index 页面时没有执行，而 onPageChange 执行了，再一次确认了应该和库中函数设置无关（比方其 ngOninit 办法中设置了要弹出 page= 0 进行初始化），于是又查问了一下 ngif 的原理

当 NgIf 为 false 时，Angular 从 DOM 中物理地移除了这个元素子树。它销毁了子树中的组件及其状态，也潜在开释了可观的资源，最终让用户体验到更好的性能。

然而咱们当初想要的成果须要不革除 DOM 来实现，于是再次搜寻就发现了 [hidden] 属性，当其值为 true 时则暗藏所在对象，然而不将其革除。

[hidden]="showBatchEdit"
退出移动版