记录一次莫名其妙的Bug (Angular生命周期)
发布：2023-12-07 02:48
更新：2023-12-07 07:12
作者:   0xdFFF
浏览:   334
分类:  技术分享
字数：1744

前言

ing 前言
今天上班发现一个很奇怪的Bug，在angular子父组件传值的地方有时候会导致@input被执行两次
其中的 [mrbScrapTask]=”model” 在s1、s2组件被污染，导致s3的mrbScrapTask的model被污染，然后被加载两次

  1.   <util-row class="dock-panel bg  flex1">
  2.      <util-tabset class="page-line-tabs" [nzAnimated]="false">
  3.          <util-tab title="X">
  4.              <s1 class="w100 h100 pd-b mg-b" [isDetail]=isDetail [mrbScrapTask]="model"  [defectiveStatus]="model.scrapStatus" (defectDataChangedEvent)="defectDataChangedEvent()" (mrbScrapDetailComponentInte)="loadById($event)"></11>
  5.          </util-tab>
  6.          <util-tab title="X">
  7.              <s2 class="w100 h100 pd-b mg-b"  [mrbScrapTask]="model"  [isDetail]=isDetail [defectiveStatus]="model.scrapStatus"></s2>
  8.          </util-tab>
  9.          <util-tab title="X">
  10.              <s3 class="w100 h100  pd-b mg-b"  [mrbScrapTask]="model" [isDetail]=isDetail [defectiveStatus]="model.scrapStatus"></s3>
  11.          </util-tab>
  12.      </util-tabset>
  13.  </util-row>

angular接收值

  1. @Input()
  2. get mrbScrapTask(): MrbScrapViewModel {
  3.     return this._mrbScrapTask;
  4. }
  5. set mrbScrapTask(value) {
  6.     this._mrbScrapTask = value;
  7.     let mrbScrapTaskId = value ? value.id : "00000000-0000-0000-0000-000000000000";
  8.     if (this.timeout) {
  9.         clearTimeout(this.timeout);
  10.     }
  11.     this.timeout = setTimeout(() => {
  12.         if (value) {
  13.             //重复执行
  14.             debugger;
  15.             this.queryParam.mrbScrapId = mrbScrapTaskId;
  16.             this.query();
  17.         }
  19.     }, 300);
  20. }

可能导致的原因

  1. model改变 导致input被执行了两次
  2. @input被重复调用
  3. model属性的值是通过异步操作获取的

解决方法

  1. 暂定的解决方法，用一个变量存储model值，然后在传递给s3，这样s1、s2的值改变就不会影响s3的model了

    Angular生命周期

    angular的生命周期如下
    图片
-- 完结 --