检测组件输入的属性在角度上的变化

Question

我有一个角度组件，它有一个输入< code>Person

export class Person {
  public name = 'Initial Name';
}

export class PersonComponent implements OnInit, OnChanges {
  @Input() public person: Person;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('changed');
  }
}

在这个组件的父组件中，如果我替换了作为子组件输入的Person对象，ngOnChanges（）

但是，如果我只从父组件中更改Person对象的名称，

当输入的属性更改时，是否有任何方法在子组件中获得通知？




Answer 1

如果使用getter，那么每次给定一个值，setter就会被执行。所以变通办法可以有两个变量

  @Input() person;
  @Input() 
  set changePerson(value)
  {
    console.log(this.person);
  }

所以，在你的父母中，你可以写

  <app-child [person]="person" [changePerson]="changePerson"></app-child>

  this.person.name="new name";
  this.changePerson=true;

另一个选项是在服务中使用EventEmitter，每次更改

    //Our service
    @Injectable({
      providedIn: 'root',
    })
    export class ChangeService {
      changed: EventEmitter<any>=new EventEmitter();
      emit(value:any)
      {
          this.changed.emit(value);
      }
    }

//Our parent
constructor (private changeService:ChangeService){}
  ngOnInit()
  {
    setTimeout(()=>{
      this.changeService.emit(this.person)

    })
    setTimeout(()=>{
      this.person.name="George";
      this.changeService.emit(this.person);
    },5000);
  }

//Our child
  person:any;
  ngOnInit() {
    this.changeService.changed.subscribe(res=>{
      this.person=res;
      console.log(res);
    })
  }

Answer 2

匿名用户

您总是可以在< code>Person上创建一个观察对象，每当属性发生变化时，它就会发出。

从“rxjs”导入{ Subject }；

export class Person {

  private _changes = new Subject<any>();
  private _name = 'Initial Name';

  // subscribe to this one
  public changes = this._changes.asObservable();

  set name(newName: string) {
    this._name = newName;
    this._changes.next({'name': newName});
  }

  get name() {
    return this._name;
  }

}

这样，您就可以订阅 person.changes，每次更改名称时都会发出一个值

当您编写 person.name = “Fred”时，将调用 setter，这反过来又会从可观察量发出新值。

Answer 3

不可以，ngOnChanges 钩子只会在引用更改时触发。通过在更改父组件中的 name 属性时执行此操作，可以轻松实现要执行的操作：

this.person = {...this.person, name: 'new value'};