Angular 推送时更改检测

Question

我正在尝试在更改参数页面上为更改检测开具发票。之后，我从 DB 获得了食谱 JSON。当我在 ngOnInit 中创建新订阅时，为什么我的代码不对组件更改检测进行发票？

import {
  Component,
  OnInit,
  OnDestroy,
  ChangeDetectionStrategy,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription, switchMap } from 'rxjs';
import { RecipesApiService } from '../../../services/recipes/recipes-api.service';
import { IRecipeApi } from '../../../services/recipes/recipes';

@Component({
  selector: 'app-recipe-page',
  templateUrl: './recipe-page.component.html',
  styleUrls: ['./recipe-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RecipePageComponent implements OnInit, OnDestroy {
  recipe!: IRecipeApi;
  private sub$!: Subscription;

  constructor(
    private route: ActivatedRoute,
    private recipesApiService: RecipesApiService
  ) {}

  ngOnInit(): void {
    this.sub$ = this.route.params
      .pipe(
        switchMap((params) => {
          return this.recipesApiService.getRecipeApiById(params['id']);
        })
      )
      .subscribe((recipe) => {
        this.recipe = recipe;
      });
  }

  ngOnDestroy() {
    this.sub$.unsubscribe();
  }
}

Answer 1

为什么会这样？使用 ChangeDetectionStrategy.OnPush 您必须手动调用更改检测。这就是使用它的全部意义所在。在您的代码中您没有这样做，因此不会调用更改检测。

在官方文档 here 中阅读有关更改检测的更多信息，或参考网络上提供的多个教程之一。

Angular 推送时更改检测

Angular Change Detection On Push

angular

angular13