如何通过另一个子组件的函数触发刷新目标子组件？

我有一个questions-manager.component.html组件，代码如下：

<div>
    <main>
        <div>
            <questions-component [title]="'title'" [id]="id" (changeStatus)="statusChange($event)"></questions-component>
            
            <div>
                <checklist-component [chId]="chId" (refreshChecklist)="refreshChecklist($event)"></checklist-component>
            </div>
        </div>
    </main>
</div>

我希望在调用refreshChecklist方法时，刷新或重新渲染questions-component。尝试过变更检测策略的相关方法但未生效，请问该如何实现？

方案1：用*ngIf强制销毁重建组件 #

这是最直接的方式，通过控制布尔值让组件先销毁再重建，彻底刷新内容。

1. 在questions-manager.component.ts里加一个控制变量：

export class QuestionsManagerComponent {
  // 保留你原有的变量
  refreshQuestionsFlag = true;

  refreshChecklist(event: any) {
    // 先设为false销毁组件
    this.refreshQuestionsFlag = false;
    // 利用Angular的变更检测周期，在下一轮再设为true重建组件
    setTimeout(() => {
      this.refreshQuestionsFlag = true;
    });
  }
}

2. 修改模板，给questions-component加上*ngIf：

<questions-component 
  *ngIf="refreshQuestionsFlag"
  [title]="'title'" 
  [id]="id" 
  (changeStatus)="statusChange($event)"
></questions-component>

方案2：手动触发变更检测（适配OnPush策略） #

如果questions-component用了ChangeDetectionStrategy.OnPush，可以手动注入ChangeDetectorRef触发检测：

1. 在questions-component.ts里注入并暴露刷新方法：

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

@Component({
  selector: 'questions-component',
  templateUrl: './questions.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class QuestionsComponent {
  @Input() title: string;
  @Input() id: number;
  @Output() changeStatus = new EventEmitter<any>();

  constructor(private cdr: ChangeDetectorRef) {}

  // 给父组件提供刷新入口
  triggerRefresh() {
    // 标记组件需要变更检测
    this.cdr.markForCheck();
    // 如果要强制检测所有子组件，用detectChanges()
    // this.cdr.detectChanges();
  }
}

2. 在questions-manager.component.ts里获取子组件实例并调用方法：

import { Component, ViewChild } from '@angular/core';
import { QuestionsComponent } from './questions.component';

export class QuestionsManagerComponent {
  // 保留你原有的变量
  @ViewChild(QuestionsComponent) questionsComp!: QuestionsComponent;

  refreshChecklist(event: any) {
    // 调用子组件的刷新方法
    this.questionsComp.triggerRefresh();
  }
}

方案3：更新输入属性触发变更 #

如果questions-component的渲染依赖某个输入属性，比如id，可以临时修改属性值再改回，触发变更检测：

export class QuestionsManagerComponent {
  // 假设这是你原有的id变量
  id: number = 1;

  refreshChecklist(event: any) {
    // 临时修改id值
    const tempId = this.id;
    this.id = 0;
    // 在下一轮变更检测时恢复原id
    setTimeout(() => {
      this.id = tempId;
    });
  }
}

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