Angular 不是运行变化检测

Question

我想根据布尔变量的值显示或隐藏按钮。为此，我正在使用 Output 属性。但是当页面初始化时按钮被隐藏但是当 EventEmmiter 发出值时按钮再次隐藏而不是它必须是可见的。

Parent Component.ts

showEditButton = false;

editButton(event: boolean) {
  this.showEditButton = true
}

Parent Component.html

<app-tools-menu-items-open
  *ngSwitchCase="toolType.FILE_OPEN"
  [isTextEditor]="isText"
  (showEditButton)="editButton($event)"
></app-tools-menu-items-open>

// This component should be visible if showEditButton is true

<ng-container *ngIf="showEditButton">
  <app-tools-menu-items-pdf-edit
    *ngSwitchCase="toolType.EDIT_PDF"
  ></app-tools-menu-items-pdf-edit>
</ng-container>

Child Component.ts

@Output('showEditButton') showEditButton = new EventEmitter<boolean>();

  uploadFile(event: Event): void {
    this.loaderService.shouldLoad(true);
    const files = (event.target as HTMLInputElement).files;
    if (files && files.length > 0) {
      const fileType = files[0].name.substring(
        files[0].name.lastIndexOf('.') + 1
      );
      this.redirectTo(fileType, {
        type: TOOL_TYPE.FILE_OPEN,
        action: 'file',
        value: {
          name: files[0].name,
          blob: files[0] as Blob,
          status: 'selected',
        } as FileResource,
      });
      this.loaderService.shouldLoad(false);
      // Emiting the value
      this.showEditButton.emit(true);
    } else {
      // TODO: Handle improper selection.
      this.loaderService.shouldLoad(false);
    }
  }

Child Component.html

 <div>
      <button
        mat-icon-button
        [matMenuTriggerFor]="options"
        (menuOpened)="setToolState(true)"
        (menuClosed)="setToolState(false)"
        class="icon-btn"
        [ngClass]="{ active: isActive }"
        matTooltip="{{ 'translateOpen' | translate }}"
      >
        <mat-icon svgIcon="file" class="app-icon-hover"></mat-icon>
      </button>
      <mat-menu #options="matMenu">
        <button mat-menu-item (click)="openMyDocuments()">
          <mat-icon svgIcon="local_drive" class="app-icon-hover"></mat-icon>
          {{ "translateMyDocuments" | translate }}
        </button>
        <input
          type="file"
          #fileInput
          (change)="uploadFile($event)"
          accept=".pdf, .txt, .text, .epub"
        />
        <button mat-menu-item (click)="openOneDrive()" *ngIf="envName !== 'prod'">
          <mat-icon svgIcon="one_drive" class="app-icon-hover"></mat-icon>
          {{ "translateOneDrive" | translate }}
        </button>
        <button mat-menu-item (click)="openGoogleDrive()" *ngIf="envName !== 'prod'">
          <mat-icon svgIcon="google_drive" class="app-icon-hover"></mat-icon>
          {{ "translateGoogleDrive" | translate }}
        </button>
      </mat-menu>
    </div>
    <div #fakeHld id="fakeHld"></div>

我在这里看到调用了 editButton，但 Angular 中的更改检测不起作用。

Answer 1

ngOnChanges 生命周期运行当属性的先前值与当前值不同时。

 OnChanges(changes: any){
   if(changes.currentValue !== changes.previousValue){
    // white your logic here
  }

详细了解 ngDoCheck 生命周期

Angular 不是运行变化检测

Angular is not running the change detection

angular

typescript

angular11

Angular 不是 运行 变化检测

Angular is not running the change detection

angular

typescript

angular11

Angular 不是运行变化检测