Angular OnPush变更检测：赋值新对象后模板未更新，需调用detectChanges？

嘿，这个坑我之前踩过！咱们来拆解下为啥会出现这种情况，以及怎么解决～

问题根源：违背了Angular的单向数据流原则 #

首先得明确：@Input()输入属性的设计初衷是让父组件向子组件传递数据，子组件不应该直接修改@Input绑定的变量。

你的组件用了OnPush变更检测策略，它的触发条件很明确：只有当「输入属性的引用来自父组件的更新」「组件内部事件触发」「异步操作完成（Angular封装的，比如Router/HttpClient的回调）」或者「手动调用变更检测方法」时，才会触发模板更新。

而你现在是在子组件内部，路由更新时直接修改自身的@Input属性——哪怕你赋值了新的引用，这个变化是组件内部发起的，不是父组件传递过来的，所以OnPush的变更检测机制不会识别到这个更新，自然不会刷新模板。

几种可行的解决方案 #

1. 遵循单向数据流（最优方案） #

把路由更新后的数据逻辑移到父组件中，由父组件生成新的数据源，再传递给子组件的@Input属性。这样父组件传递的新引用会自动触发子组件的OnPush变更检测，完全不需要手动调用检测方法。

举个例子：

// 父组件代码
import { ActivatedRoute } from '@angular/router';

@Component({
  template: `<app-nav-links [links]="navLinks"></app-nav-links>`
})
export class ParentComponent {
  navLinks: Link[] = [];

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 监听路由变化，生成新的links数组
    this.route.params.subscribe(params => {
      this.navLinks = this.generateNavLinks(params);
    });
  }

  private generateNavLinks(params: any): Link[] {
    // 根据路由参数生成新的导航链接数组
    return [
      // 你的链接逻辑
    ];
  }
}

子组件只需要接收@Input并渲染即可，完全不用处理路由逻辑：

// 子组件代码
@Component({
  selector: 'app-nav-links',
  templateUrl: './nav-links.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NavLinksComponent {
  @Input() links: Link[] = [];
}

2. 改用组件内部状态（子组件独立处理逻辑） #

如果一定要在子组件内部处理路由变化，可以把@Input作为初始值，然后维护一个内部的状态变量，用它来渲染模板。这样内部状态的变更（哪怕是赋值新引用），结合路由回调的异步特性（Angular会在NgZone中处理Router事件，自动触发变更检测），模板就能正常更新了。

示例：

// 子组件代码
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-nav-links',
  templateUrl: './nav-links.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NavLinksComponent {
  @Input() initialLinks: Link[] = [];
  // 用内部变量渲染模板
  private _links: Link[] = [];

  get links(): Link[] {
    return this._links;
  }

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this._links = [...this.initialLinks];
    // 监听路由变化更新内部状态
    this.route.params.subscribe(params => {
      this._links = this.updateLinksBasedOnRoute(params);
    });
  }

  private updateLinksBasedOnRoute(params: any): Link[] {
    // 根据路由参数更新链接数组
    return [...this._links, /* 新的链接项 */];
  }
}

模板里绑定内部的links属性：

<!-- 子组件模板 -->
<a *ngFor="let link of links" [routerLink]="link.path">{{ link.label }}</a>

3. 手动触发变更检测（备选方案） #

如果上面两种方案都不适合你的场景，也可以手动调用变更检测方法。不过这里更推荐用markForCheck()而不是detectChanges()——前者会告诉Angular把当前组件及其父组件标记为需要在下一次变更检测周期中检查，更符合OnPush的设计理念；而detectChanges()是立即触发当前组件及其子组件的变更检测。

示例：

// 子组件代码
import { ActivatedRoute, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-nav-links',
  templateUrl: './nav-links.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NavLinksComponent {
  @Input() links: Link[] = [];

  constructor(
    private route: ActivatedRoute,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      // 赋值新引用
      this.links = this.generateNewLinks(params);
      // 标记组件需要检查
      this.cdr.markForCheck();
      // 或者立即触发检测：this.cdr.detectChanges();
    });
  }
}

总结 #

优先选择前两种方案，尤其是遵循单向数据流的方式，这能让你的组件逻辑更清晰，也符合Angular的设计规范。手动触发变更检测尽量作为最后的备选方案。

内容的提问来源于stack exchange，提问作者MartaGalve