onPush 更改检测策略不更新 Angular 中的值

Question

我正在学习如何使用 onPush 检测策略。 我的视图更新得很好，但我的 child.component.ts 值上的变量没有，但它们在 child.component.html 上有

子组件

@Component({
  ....
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class BdayFormComponent implements OnInit {

  @Input() question: Question;
  @Output() nextQuestion = new EventEmitter<Question>();


  nextQuestions(): void {
    ...
    this.nextQuestion.emit(......)
    console.log(this.question);
  }
}

正如你所看到的nextQuestion ，告诉父组件分派一个动作来获取新问题。 我可以在我的 HTML 中看到下一个问题（假设问题 #2），但是当我执行console.log(this.questions); 它打印问题#1。

父组件

export class BdayShellComponent implements OnInit {
  question$: Observable<Question>;

  constructor(private store: Store<fromProduct.State>) { }

  ngOnInit(): void {
    this.question$ = this.store.pipe(select(fromProduct.getCurrentQuestion));
  }

  setCurrentQuestion(question: Question): void {
    this.store.dispatch(new bdayActions.SetCurrentQuestion(question));
  }
}

父组件 HTML

<app-bday-form [question]="question$ | async"
        (nextQuestion)="setCurrentQuestion($event)"></app-bday-form>

Answer 1

在您放置 log 语句时，组件没有收到新输入。

尝试以下操作，您将看到正在记录的值

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes.question)
  }