Angular 2/4:无法更新子组件视图

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

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <button (click)="updateData()">Update Data</button>
    <app-child [data]="parentData"></app-child>
  `,
})
export class ParentComponent {
  parentData: string = 'Initial data';

  constructor(private cdr: ChangeDetectionRef) {}

  updateData() {
    this.parentData = 'Updated data';
    this.cdr.detectChanges(); // 手动触发变更检测
  }
}

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

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>{{ data }}</p>
  `,
})
export class ChildComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges() {
    console.log('Data changed:', this.data);
  }
}