角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。

任何建議？

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({...})傳遞新的選擇的用戶作爲參數。