Angular2 订阅子组件中 @Input 的更改

# Angular 2中订阅子组件@Input的更改

typescript
// 子组件
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-child',
  template: '
{{ message }}
',
})
export class ChildComponent implements OnChanges {
  @Input() message: string;
  ngOnChanges(changes: SimpleChanges): void {
    if (changes.message) {
      console.log('Input属性message发生了变化:', changes.message.currentValue);
    }
  }
}
// 父组件
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    
    改变消息
  `,
})
export class ParentComponent {
  parentMessage = '初始消息';
  changeMessage(): void {
    this.parentMessage = '新消息';
  }
}

typescript
// input-changes.service.ts
import { Injectable, SimpleChanges } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class InputChangesService {
  private inputChangesSubject = new Subject();
  inputChanges$ = this.inputChangesSubject.asObservable();
  emitInputChanges(changes: SimpleChanges): void {
    this.inputChangesSubject.next(changes);
  }
}

typescript
// parent.component.ts
import { Component, OnInit } from '@angular/core';
import { InputChangesService } from './input-changes.service';
@Component({
  selector: 'app-parent',
  template: `
    
    改变消息
  `,
})
export class ParentComponent implements OnInit {
  parentMessage = '初始消息';
  constructor(private inputChangesService: InputChangesService) {}
  ngOnInit(): void {
    this.inputChangesService.inputChanges$.subscribe((changes) => {
      if (changes.parentMessage) {
        console.log('Input属性parentMessage发生了变化:', changes.parentMessage.currentValue);
      }
    });
  }
  changeMessage(): void {
    this.parentMessage = '新消息';
    this.inputChangesService.emitInputChanges({ parentMessage: { currentValue: this.parentMessage } });
  }
}