Angular报错Cannot read properties of undefined (reading 'page')求助

报错Cannot read properties of undefined (reading 'page')的核心原因是**@ViewChild装饰器仅在组件/指令类中生效，你将分页器、排序器的查询写在了抽象服务类中，永远无法获取到实例，导致this.paginator为undefined，读取page属性就触发了报错**。

• 点击控制台报错对应的代码行添加断点，刷新页面后查看触发page属性读取的宿主变量是否为undefined
• 在initBaseComponent方法开头打印console.log(this.paginator, this.sort)，直接确认两个实例的初始化状态

1. 修改抽象父类属性定义
   将list-component-helper.service.ts中原有的@ViewChild声明删除，改为抽象属性，强制子类实现：

// 删除原有两行@ViewChild声明，替换为以下代码
abstract paginator: MatPaginator;
abstract sort: MatSort;

2. 子类中添加查询声明
   在istoric-comenzi.component.ts的类中添加分页器、排序器的@ViewChild查询：

// 类内部添加以下代码
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;

如果你的mat-paginator写在*ngIf等结构指令内部，需要将static参数改为false。

3. 补全模板中的分页器组件
   检查istoric-comenzi.component.html中是否正确添加了分页器组件，示例代码如下：

<mat-paginator 
  [pageSize]="pageSize" 
  [pageSizeOptions]="pageSizeOptions" 
  [length]="resultsLength"
></mat-paginator>

4. 添加空值判断兼容边界场景
   修改initBaseComponent中的逻辑，增加分页器的存在性判断，避免极端场景报错：

protected initBaseComponent(): void {
  if (this.sort) {
    this.addSubscription(this.sort.sortChange.subscribe(() => this.paginator?.pageIndex = 0));
  }
  // 新增空值判断逻辑
  let observable$: Observable<any>;
  if (this.sort && this.paginator) {
    observable$ = merge(this.sort.sortChange, this.paginator.page);
  } else if (this.paginator) {
    observable$ = this.paginator.page.asObservable();
  } else if (this.sort) {
    observable$ = this.sort.sortChange;
  } else {
    // 无分页无排序场景直接退出，避免报错
    return;
  }
  // 后续原有逻辑不变
  this.addSubscription(observable$.pipe(...))
}

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