垫子旋转器不会停止旋转

Question

我有一个组件（对话组件），我在其中引用另一个组件（数据组件）。当我设置

isLoaded = false

（在 dialog-component-ts 中）我使用

this.isLoaded.emit(true);

（在数据组件中），然后 isLoaded 被设置为真（在 dialog-component-ts 中），但是 mat-spinner 不会停止旋转，并且不会显示加载的数据。我已经在它工作的其他组件中使用了几乎相同的代码。当我设置

isLoaded = true

(in dialog-component-ts) 然后没有微调器，正在显示数据。有什么想法吗？

对话框组件-html:

 <mat-card>
    <div *ngIf="!isLoaded" fxLayout="row" fxLayoutAlign="center center" class="loading">
      <mat-spinner></mat-spinner>
    </div>
    <app-data *ngIf="selectedDialogData === enum1" [fxShow]="isLoaded"
                       (title)="onComponentTitleChange($event)"
                       (isLoaded)="onComponentReadyStateChange($event)"
                       (dialogDataChanged)="onSelectedDialogDataChange($event)">
    </app-data>
 </mat-card>

对话框组件-ts:

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})


export class DialogComponent {

  constructor(
    @Inject(MAT_DIALOG_DATA) public dialogData: SomeModel) { }

  public isLoaded = false;
  
...

  public onComponentReadyStateChange(state) {
    this.isLoaded = state;
  }
...

数据组件-ts:

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class WorkingtypeDataComponent implements OnInit {

  @Output() title = new EventEmitter<string>();
  @Output() isLoaded = new EventEmitter<boolean>();
  @Output() dialogDataChanged = new EventEmitter<EnumList>();

  constructor(@Inject(MAT_DIALOG_DATA) public dialogData: SomeModel,
              private dialogRef: MatDialogRef<DialogComponent>,
              private formBuilder: FormBuilder,
              private Service: SomeService,
              private dialog: MatDialog) { }


  ngOnInit(): void {
    this.isLoaded.emit(false);
    this.currentElement = this.dialogData.changeElement;
    this.alreadyExistingElementNames = this.dialogData.alreadyExistingElementNames;
    this.isEditing = this.currentElement.name != null;
    const title = `texts.${this.isEditing ? 'edit' : 'add'}`;
    this.title.emit(title);
    this.isLoaded.emit(true);
  }

Answer 1

使用 ChangeDetection.OnPush 时 Angular 仅在检测到 @Input 更改时运行更改检测。

要对子输出执行操作，您需要手动触发更改检测周期。

例如使用this.cdr.detectChanges()

Guide

垫子旋转器不会停止旋转

mat-spinner does not stop spinning

eventemitter

typescript

angular