Angular父子组件传模板：父组件变量更新后模板不重渲染问题

问题描述 #

我有一个模态框包裹组件（child.component），它使用父组件（parent.component）传入的模板。但即使在父组件内触发someFunction()更新变量，模板中的变量也不会重新渲染，始终显示默认值999。如何确保父组件的order变量更新时，模板随之重新渲染？

现有代码 #

parent.component.html

<div>parent content</div>

<ng-template #temp> 
  <div>{{ order.Id }}</div>   <!-- 此处不会重新渲染 -->
</ng-template>

<app-modal-wrapper [temp]="temp"></app-modal-wrapper>

parent.component.ts

export class ParentComponent implements OnInit {

  public order: any = { Id: 999 }; 

  public someFunction(x) {
    this.order = { Id: x };
  }
}

child.component.html

<ng-container [ngTemplateOutlet]="temp"></ng-container>

child.component.ts

@Component({
  selector: 'app-modal-wrapper',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  @Input() temp: TemplateRef<any>;
}

解决方案 #

方案1：显式传递模板上下文（推荐） #

核心思路是将父组件的order变量作为输入传递给子组件，再通过ngTemplateOutletContext传递给模板，确保变量变更能触发模板刷新。

1. 修改父组件，将order传递给子组件：
   parent.component.html

<div>parent content</div>

<ng-template #temp let-order> 
  <div>{{ order.Id }}</div>
</ng-template>

<app-modal-wrapper [temp]="temp" [order]="order"></app-modal-wrapper>

2. 子组件新增order输入属性，并配置模板上下文：
   child.component.ts

import { Component, Input, OnInit, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-modal-wrapper',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  @Input() temp: TemplateRef<any>;
  @Input() order: any; // 新增输入属性

  constructor() { }

  ngOnInit(): void {
  }
}

child.component.html

<ng-container [ngTemplateOutlet]="temp" [ngTemplateOutletContext]="{ $implicit: order }"></ng-container>

方案2：手动触发变更检测（针对变更检测周期外的场景） #

如果someFunction()是在Angular变更检测周期外调用的（比如setTimeout、第三方库回调），可以在父组件中手动触发变更检测：

parent.component.ts

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

export class ParentComponent implements OnInit {

  public order: any = { Id: 999 }; 

  constructor(private cdr: ChangeDetectorRef) { } // 注入ChangeDetectorRef

  ngOnInit(): void {
  }

  public someFunction(x) {
    this.order = { Id: x };
    this.cdr.detectChanges(); // 手动触发变更检测
  }
}

方案3：调整子组件变更检测策略（若使用OnPush） #

如果子组件设置了changeDetection: ChangeDetectionStrategy.OnPush，除了方案1的传递order输入外，也可以通过Observable结合async管道传递数据，确保变更能被检测到。

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