Angular 13子组件UI未随父组件更新索引问题排查

问题现象 #

• 父组件更新分页子组件的index输入属性后，子组件UI未显示新的页码索引，分页状态无变化
• 子组件采用ChangeDetectionStrategy.OnPush变更检测策略
• 子组件的page事件能正常向父组件传递页码变化，但自身UI无响应
• 手动调用ChangeDetectorRef的detectChanges()或markForCheck()方法后，UI仍未更新

相关代码 #

子组件TypeScript代码 #

import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'numbered-pagination',
  templateUrl: './numbered-pagination.component.html',
  styleUrls: ['./numbered-pagination.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NumberedPaginationComponent implements OnChanges {
  @Input() index: number = 1;
  @Input() totalCount: number = 0;
  @Input() pageSize: number = 50;
  @Input() rulerLength: number = 5;

  @Output() page: EventEmitter<number> = new EventEmitter<number>();

  maxPages: number = 1;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['totalCount'] || changes['pageSize']) {
      this.calculateMaxPages();
    }
  }

  private calculateMaxPages(): void {
    this.maxPages = Math.ceil(this.totalCount / this.pageSize) || 1;
  }

  get pagination(): NumberedPagination {
    const { index, maxPages, rulerLength } = this;
    const pages = ruler(index, maxPages, rulerLength);
    return { index, maxPages, pages };
  }

  navigateToPage(pageNumber: number): void {
    if (allowNavigation(pageNumber, this.index, this.maxPages)) {
      this.index = pageNumber;
      this.page.emit(this.index);
      console.log("Index  =>> " + this.index);
    }
    console.log("Index1  =>> " + this.index);
  }

  trackByFn(index: number): number {
    return index;
  }

  constructor(private cdr: ChangeDetectorRef) {}

  refreshToInitial() {
    this.navigateToPage(1);
    this.cdr.detectChanges();
    this.cdr.markForCheck();
  }
}

function generatePageArray(rulerLength: number): number[] {
  const result: number[] = [];
  for (let i = 1; i <= rulerLength; i++) {
    result.push(i);
  }
  return result;
}
const ruler = (
  currentIndex: number,
  maxPages: number,
  rulerLength: number
): number[] => {
  if (maxPages <= rulerLength) {
    return generatePageArray(maxPages);
  }
  const array = new Array(rulerLength).fill(null);
  const min = Math.floor(rulerLength / 2);

  return array.map((_, index) =>
    rulerFactory(currentIndex, index, min, maxPages, rulerLength)
  );
};

const rulerOption = (
  currentIndex: number,
  min: number,
  maxPages: number
): RulerFactoryOption => {
  return currentIndex <= min
    ? RulerFactoryOption.Start
    : currentIndex >= maxPages - min
    ? RulerFactoryOption.End
    : RulerFactoryOption.Default;
};

const rulerFactory = (
  currentIndex: number,
  index: number,
  min: number,
  maxPages: number,
  rulerLength: number
): number => {
  const factory = {
    [RulerFactoryOption.Start]: () => index + 1,
    [RulerFactoryOption.End]: () => maxPages - rulerLength + index + 1,
    [RulerFactoryOption.Default]: () => currentIndex + index - min,
  };

  return factory[rulerOption(currentIndex, min, maxPages)]();
};

const allowNavigation = (
  pageNumber: number,
  index: number,
  maxPages: number
): boolean => {
  return pageNumber !== index && pageNumber > 0 && pageNumber <= maxPages;
};

子组件HTML代码 #

<ol *ngIf="maxPages>1" class="paginator-container">
  <li (click)="navigateToPage(1)">
    <i matTooltip="First Page" class="fa-solid fa-angles-left"></i>&nbsp;
      <span>First</span>
  </li>
  <li (click)="navigateToPage(index - 1)"><i matTooltip="Previous Page" class="fa-solid fa-angle-left"></i>&nbsp;<span>Previous</span></li>
  <li
    *ngFor="let page of pagination.pages; trackBy: trackByFn"
    class="paginator-number"
    [class.active]="page === pagination.index"
    (click)="navigateToPage(page)"
    
    >
    {{ page }}
  </li>
  <li (click)="navigateToPage(index + 1)"><span>Next</span>&nbsp;<i matTooltip="Next Page" class="fa-solid fa-angle-right"></i></li>
  <li (click)="navigateToPage(maxPages)">
    <span>Last</span>&nbsp;
    <i matTooltip="Last Page" class="fa-solid fa-angles-right"></i>
</li>
</ol>

父组件模板代码 #

<button class="edit_button" (click)="onAssignToButtonClick('Extracted')">
  Assign To
</button>

<numbered-pagination [index]="extractedPageNumber" (page)="pageEvent('New', $event)" [pageSize]="pageSize" [totalCount]="pageNumberExtractedLimit"></numbered-pagination>

原因分析 #

1. 单向数据流被破坏：子组件的navigateToPage方法直接修改了@Input() index属性，导致父子组件的index值不一致，Angular的变更检测无法正确识别状态变化。
2. 未监听index输入属性的变更：子组件的ngOnChanges只处理了totalCount和pageSize的变化，当父组件更新index时，OnPush模式下没有触发变更检测。
3. Getter属性的局限性：pagination是一个getter属性，OnPush模式下，getter的返回值变化不会自动触发变更检测，除非依赖的输入属性被Angular检测到变更。

解决方案 #

方案1：修复单向数据流（推荐） #

保持输入属性由父组件单向控制，子组件仅负责发射页码变更事件：

• 修改子组件navigateToPage方法：

navigateToPage(pageNumber: number): void {
  if (allowNavigation(pageNumber, this.index, this.maxPages)) {
    this.page.emit(pageNumber); // 直接发射目标页码，不再修改this.index
  }
}

• 父组件在pageEvent回调中更新extractedPageNumber：

pageEvent(type: string, pageNum: number) {
  if (type === 'New') {
    this.extractedPageNumber = pageNum;
  }
}

方案2：监听index变更并触发检测 #

在子组件的ngOnChanges中添加对index的监听，确保输入属性变化时触发变更检测：

ngOnChanges(changes: SimpleChanges): void {
  if (changes['totalCount'] || changes['pageSize']) {
    this.calculateMaxPages();
  }
  // 监听index属性变更，触发变更检测
  if (changes['index']) {
    this.cdr.markForCheck();
  }
}

同时移除子组件内部修改this.index的代码，保持单向数据流。

方案3：使用Observable优化响应性 #

将pagination改为Observable，确保状态变化能被Angular检测到：

• 子组件中添加Observable相关代码：

import { BehaviorSubject } from 'rxjs';

// ...其他代码
private paginationSubject = new BehaviorSubject<NumberedPagination>({ index: 1, maxPages: 1, pages: [] });
pagination$ = this.paginationSubject.asObservable();

ngOnInit() {
  this.updatePagination();
}

ngOnChanges(changes: SimpleChanges): void {
  if (changes['totalCount'] || changes['pageSize'] || changes['index']) {
    this.calculateMaxPages();
    this.updatePagination();
    this.cdr.markForCheck();
  }
}

private updatePagination(): void {
  const { index, maxPages, rulerLength } = this;
  const pages = ruler(index, maxPages, rulerLength);
  this.paginationSubject.next({ index, maxPages, pages });
}

• 子组件HTML使用async管道订阅：

<li *ngFor="let page of (pagination$ | async).pages; trackBy: trackByFn"
    class="paginator-number"
    [class.active]="page === (pagination$ | async).index"
    (click)="navigateToPage(page)">
  {{ page }}
</li>

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