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

Question

（工作演示在这里）

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

页脚.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);
  }

}

页脚.component.html

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);
  }

}

当添加到带有app-footer.

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

app.component.ts

constructor(private _bottomSheet: MatBottomSheet) {}

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

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

Answer 1

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