首页 文章

检测组件输入的属性何时以角度变化

提问于
浏览 次
1

我有一个角度组件，有一个输入 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 对象的 name ，则不会在子组件中触发 ngOnChanges() （无论如何，如果我将人名绑定到子模板中的html元素，它会更新） .

当输入的属性发生变化时，有没有办法在子组件中得到通知？

angular

4 回答

  • 0

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

    this.person = {...this.person, name: 'new value'};
    回复于
  • 0

    您始终可以在 Person 上创建一个Observable，只要属性发生更改，它就会发出 .

    从'rxjs'导入;

    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 ，每次更改 name 时都会发出一个值

    当您编写 person.name = 'Fred' 时，将调用setter，而setter将从Observable中发出新值 .

    回复于
  • 3

    为什么你需要你的孩子知道这个变化？在您的孩子中，您应该只更改与孩子相关的事物并将其冒泡到父母身上 . 使用Observables，孩子仍然可以更容易地显示信息 . 我建议使用@Output然后更改父对象

    回复于
  • -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;

    每次更改时， Another option 都在服务中使用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);
    })
  }
    回复于

相关问题