Angular中ChangeDetectorRef与ChangeDetectionStrategy无法触发重渲染求助

1. 修正子组件的ChangeDetectorRef注入方式 #

你之前的注入错误是因为构造函数写法不符合Angular依赖注入规范，正确的做法是在构造函数参数里声明并加上private修饰符，由Angular自动注入实例：

import { ChangeDetectorRef, Component } from '@angular/core';

@Component({
  selector: 'app-input-table',
  templateUrl: './input-table.component.html',
  styleUrls: ['./input-table.component.css']
})
export class InputTableComponent {
  inputs: any[] = [];

  // 正确的注入写法
  constructor(private cdr: ChangeDetectorRef) {}

  typeEntry(rowCount: number) {
    // 重置数组
    this.inputs = Array(rowCount).fill({});
    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

2. 父组件不要手动实例化子组件，用模板引用直接调用方法 #

你提到的手动实例化子组件是错误操作，应该通过ViewChildren获取所有子组件实例，或者直接用模板引用变量：

<!-- 父组件模板 -->
<select (change)="onSelected($event.target.value)">
  <option value="1">1行</option>
  <option value="2">2行</option>
  <option value="3">3行</option>
</select>

<app-input-table #table1></app-input-table>
<app-input-table #table2></app-input-table>
<app-input-table #table3></app-input-table>
<app-input-table #table4></app-input-table>

// 父组件类
import { Component, ViewChildren, QueryList } from '@angular/core';
import { InputTableComponent } from './input-table/input-table.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  // 通过ViewChildren批量获取所有子组件实例
  @ViewChildren(InputTableComponent) tables!: QueryList<InputTableComponent>;

  onSelected(rowCount: string) {
    const count = parseInt(rowCount, 10);
    // 遍历子组件调用方法
    this.tables.forEach(table => table.typeEntry(count));
  }
}

3. 更优方案：用@Input()传递行数，让Angular自动处理变更 #

手动调用方法和变更检测不是最贴合Angular理念的方式，推荐用输入属性绑定，Angular会自动监听变更并更新视图：

子组件修改 #

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-input-table',
  templateUrl: './input-table.component.html',
  styleUrls: ['./input-table.component.css']
})
export class InputTableComponent implements OnChanges {
  @Input() rowCount = 1;
  inputs: any[] = [];

  ngOnChanges(changes: SimpleChanges) {
    // 监听rowCount的变化，更新数组
    if (changes['rowCount']) {
      this.inputs = Array(this.rowCount).fill({});
    }
  }
}

父组件修改 #

<!-- 父组件模板 -->
<select [(ngModel)]="selectedRowCount">
  <option value="1">1行</option>
  <option value="2">2行</option>
  <option value="3">3行</option>
</select>

<app-input-table [rowCount]="selectedRowCount"></app-input-table>
<app-input-table [rowCount]="selectedRowCount"></app-input-table>
<app-input-table [rowCount]="selectedRowCount"></app-input-table>
<app-input-table [rowCount]="selectedRowCount"></app-input-table>

// 父组件类
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  selectedRowCount = 1;
}

这种方式不需要手动调用变更检测，Angular会在rowCount属性变化时自动触发ngOnChanges，更新inputs数组后，*ngFor会自动识别数组变化并刷新表格行。

之前错误的原因排查 #

• 构造函数注入ChangeDetectorRef报错：是因为你可能手动实例化了ChangeDetectorRef（比如new ChangeDetectorRef()），Angular的依赖注入必须通过构造函数参数声明，由框架提供实例。
• 运行时cdr为undefined：是因为你只声明了私有字段但未通过构造函数让Angular注入实例，导致变量未初始化。

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