angular 子组件重新渲染

在 Angular 中，子组件的重新渲染可以通过触发 Angular 的检测机制来实现。

最常用的方法是使用 Angular 的 ChangeDetectorRef 类，该类可以显式地触发 Angular 的检测机制，以便重新渲染子组件。

下面是一个示例：

import { ChangeDetectorRef, Component } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    {{message}}
export class ChildComponent {
  message = 'Hello';
  constructor(private cdr: ChangeDetectorRef) {}
  updateMessage() {
    this.message = 'Goodbye';
    this.cdr.detectChanges();
在上面的代码中，我们在子组件的构造函数中注入了 ChangeDetectorRef，并在 updateMessage 方法中调用了 detectChanges 方法，以触发 Angular 的检测机制。
另一种方法是使用 Angular 的 ngOnChanges 生命周期钩子，该钩子在输入属性发生变化时被调用，以便重新渲染子组件。
下面是一个示例：
import { Component, OnChanges, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    {{message}}
export class ChildComponent implements OnChanges {
  @Input() message: string;
  ngOnChanges() {
    console.log('Message changed:', this.message);
在上面的代码中，我们使用了 @Input 装饰器，以声明 message 属性为输入属性。当该属性的值发生变化时，Angular 会自动调用 ngOnChanges 钩子，以便重新渲染子组件。