angular - 更改检测似乎在动态实例化的组件中不起作用

Question

(工作演示here)

我制作了一个非常简单的组件，它显示一条消息 3 秒，然后显示一条“完成”消息:

footer.component.ts

import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

  waiting = true;

  ngOnInit() {
    setTimeout(() => this.waiting = false, 3000);
  }

}

footer.component.html

<div class="footer">
  <div *ngIf="waiting">Waiting 3s</div>
  <div *ngIf="!waiting">Done !</div>
</div>

当使用 app-footer 将这个组件添加到模板时，它就像一个魅力。

但是，当使用 Material 的 BottomSheet 动态实例化时，不会发生更改检测。变量 waiting 的值正确，但显示的文本错误。我必须手动调用 ChangeDetectorRef。

app.component.ts

constructor(private _bottomSheet: MatBottomSheet) {}

showBottomSheet() {
  this._bottomSheet.open(FooterComponent);
}

查看 StackOverflow 后，我了解到变化检测与动态实例化组件的行为不同，但似乎唯一的变化在于 @Input() 变量。这是预期的行为吗？它是来自 Material 的 BottomSheet 的错误吗？

Answer 1

Material BottomSheet 使用“mat-bottom-sheet-container”包装您的组件，它将 ChangeDetection 设置为 OnPush，以便您的 FooterComponent 继承它。您必须通过注入(inject) ChangeDetectorRef 并调用 'markForCheck' 方法来手动触发更改检测；)