Angular 4 - 监听变量属性的变化

Question

我想要监视json的嵌套属性。每当该嵌套属性发生更改时，调用一个函数(fn())。

export class HeaderComponent  {
  user: any;

  constructor(){
    this.user = {
      options: [
        { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' },
        { name: 'Elliot Fu', img: 'assets/img/avatar/small/elliot.jpg' },
        { name: 'Stevie Feliciano', img: 'assets/img/avatar/small/stevie.jpg' }
      ],
      selected: { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' }
    }
  }

Fn更改值

public changeUser(item) {
    this.user.selected = item;
    /*Some Code here*/
}

  public customLogin(user) {
        /*Some Code here*/
        this.user.selected = user;
        /*Some Code here*/
}

每当 this.user.selected 的值发生变化时，调用一个函数。 我也在使用 rxjx。 有什么建议吗？

- Sumit Ridhal

---

HeaderComponent 需要监听该值还是另一个组件（父组件）？ - ADreNaLiNe-DJ

@ADreNaLiNe-DJ，HeaderComponent 中的一个函数会改变 this.user.selected 的值。 - Sumit Ridhal

提供更多信息，它将以何种方式改变。您可以尝试使用 ngDoCheck。 - Yordan Nikolov

请提供详细信息，例如：属性如何被更改，您希望在哪里观察到该更改？ - dee zg

@dee zg @YordanNikolov 编辑了帖子，添加了“Fn更改值”的内容。 - Sumit Ridhal

Answer 1

你可以这样做：

export class HeaderComponent implements OnDestroy {
  user: any;
  userSelectSubject: BehaviorSubject<{name: string, img: string}>;
  private userSelectSubscription: Subscription;

  constructor(){
    this.user = {
      options: [
        { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' },
        { name: 'Elliot Fu', img: 'assets/img/avatar/small/elliot.jpg' },
        { name: 'Stevie Feliciano', img: 'assets/img/avatar/small/stevie.jpg' }
      ]
    }

    this.userSelectSubject = new BehaviorSubject<{name: string, img: string}>({ name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' });

    this.userSelectSubscription = this.userSelectSubject.subscribe((newSelectedUser) => {
      this.user.selected = newSelectedUser;
    });
  }

  ngOnDestroy() {
    this.userSelectSubscription.unsubscribe();
  }
}

然后您只需要调用this.userSelectSubject.next({...})并将新选择的用户作为参数传递。

- Giovane

---

谢谢 @Giovane，这很有帮助。 - Sumit Ridhal

导入订阅，但出现错误“ .subscribe不是函数”，我有什么遗漏吗？ - Sae