【问题标题】:Angular2 trigger function when observable property changes可观察属性更改时的Angular2触发功能
【发布时间】:2017-04-22 22:49:54
【问题描述】:

我使用workingData 服务来保存渗透到我的应用程序中的数据。它向 Mock workingData 对象返回一个 observable。

@Injectable()
export class WorkingDataService {
  getWorkingData(): Observable<WorkingData> {
    return Observable.of(WORKINGDATA);
  }
  getSelectedDate(): Observable<Date> {
    return Observable.of(WORKINGDATA.selectedDate);
  }
}

workingData 对象的一个​​属性是一个名为 selectedDate 的日期字段。

export const WORKINGDATA: WorkingData = {
  today: new Date(),
  selectedDate: new Date('11-15-2016'),
  targetDate: new Date(),
  data: []
};

可以通过单击“上个月”或“下个月”按钮更新此值:

这会触发cal-nav 组件中的以下函数(或对应的incrementDate()):

decrementDate(): void {
  let newDate = new Date(this.workingData.selectedDate.getDate());
  newDate.setMonth(newDate.getMonth() - 1);
  this.workingData.monthPrior = newDate;
}

observable 更新了注入workingDate 服务的所有组件中的视图,但我现在需要在month 组件(它是cal-nav 组件的兄弟)中触发一个函数。 每次更新workingData.selectedDate时如何触发month组件中的函数,即使它是从不同的组件更新的?

更新:我现在单独订阅 selectedDate 属性。

ngOnInit(): void {
  this.getWorkingData();
  this.getSelectedDate(); // Just added
}

getSelectedDate(): void{
  this._workingDataService.getSelectedDate().subscribe(selectedDate => {this.myFunc();});
}
myFunc(){
  console.log('working');
}

这会触发myFunc() oninit,但不会在值更新时触发。

【问题讨论】:

    标签: javascript angular typescript observable angular2-changedetection


    【解决方案1】:

    你可以在你的代码中订阅你的 Observable

    this.myObservable.subscribe( data => {
      myFunction();
     });
    

    如果这不能满足您的需求,那么您必须提供更多代码或您确切需要的一些序列

    【讨论】:

    • 我不想触发函数,除非特定属性发生变化,而不是整个对象。有没有办法做到这一点?
    • 是的,请单独观察该属性。
    • 这就够了吗?
    • 创建一个可观察的持有你的财产并订阅它
    • 我以为我已经做到了getSelectedDate()。我必须如何更改我的代码?查看我的更新服务
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-07
    • 2023-04-06
    • 2014-11-02
    • 2018-05-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多