Angular 双向数据绑定并观察父组件的变化

# 使用Angular实现双向数据绑定并观察父组件的变化

typescript
// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    
    
{{ message }}
  `,
})
export class AppComponent {
  message = 'Hello, Angular!';
}

typescript
// child.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-child',
  template: '
{{ messageFromParent }}
',
})
export class ChildComponent implements OnChanges {
  @Input() messageFromParent: string;
  ngOnChanges(changes: SimpleChanges) {
    if (changes.messageFromParent) {
      console.log('Message from parent changed:', changes.messageFromParent.currentValue);
      // 这里可以执行其他逻辑
    }
  }
}

typescript
// parent.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
  selector: 'app-parent',
  template: `
    
  `,
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent: ChildComponent;
  parentMessage = 'Hello from parent!';
  ngAfterViewInit() {
    // 在视图初始化后，可以访问子组件并观察其变化
    this.childComponent.messageFromParent = 'New message from parent';
  }
}