typescript – 如何脏检查Angular2中的可迭代组件属性？

发布时间：2020-12-17 17:15:56 所属栏目：安全来源：网络整理

导读：看看这个简单的Angular2组件： @Component({ selector: 'status-area',directives: [],template: require('./status-area.tpl.jade')})export class StatusAreaComponent { constructor(private _settings: SettingsProvider) {} get items() { return _.fil

看看这个简单的Angular2组件：

@Component({
  selector: 'status-area',directives: [],template: require('./status-area.tpl.jade')
})

export class StatusAreaComponent {

  constructor(private _settings: SettingsProvider) {}

  get items() {
     return _.filter(this._settings.features,(feature: any) => {
      return feature.inStatusBar && feature.isEnabled;
    });
  }
}

SettingsProvider具有属性功能,由另一个组件(例如SettingsPanel)修改.此组件仅通过服务链接(无输入参数).

因此,正如您所见,我需要仅从_settings.features属性获取已启用并标记为状态栏兼容的功能.

为此我使用lodash方法查找.

但是,正如您可能猜到的,angular会在开发模式中抛出异常：

Expression has changed after it was checked

之所以会发生这种情况是因为每次传递的_.filter()都会返回数组的新实例,但是集合是相同的.

我的问题是,你如何解决这种情况？或者可能有另一种解决方案/方法来处理这种情况.

在我看来,如果angular2有这样的特殊装饰器,那将是非常有用的：

@checkIterable()
get items() {
     return _.filter(this._settings.features,(feature: any) => {
      return feature.inStatusBar && feature.isEnabled;
    });
  }

当然,我可以通过使用另一种方法,事件和事件监听器来解决这个问题,但它产生了很多样板代码.

看看这个例子：

export class StatusAreaComponent implements OnInit,OnDestroy {

  protected _items;
  protected _removeWatcherFn;

  constructor(private settings: SettingsProvider) {}

  ngOnInit() {
    this._items =  this._fetchItems();

    this._removeWatcherFn = this.settings.onChange.bind(() => {
      this._items =  this._fetchItems();
    });
  }

  ngOnDestroy() {
    this._removeWatcherFn();
  }

  _fetchItems() {
    return _.filter(this.settings.features,(feature: any) => {
      return feature.inStatusBar;
    });
  }


  get items() {
    return this._items;
  }
}

通过这种方式,Angular很高兴,但我没有.

解决方法

由于您已经在使用lodash,因此您可以使用方便的 _.memoize方法来缓存过滤结果.它通常用于避免昂贵的计算,但在您的情况下,您可以从其副作用中受益,因为Angular不会遇到此问题,过滤后的数组是每个检查的不同对象.

以下是该问题的可能解决方案：

@Component({
  selector: 'status-area',template: require('./status-area.tpl.jade')
})
export class StatusAreaComponent {

  constructor(private _settings: SettingsProvider) {
    this.initFilter();
  }

  initFilter() {

    function filterItems(items) {
      return _.filter(items,(feature: any) => {
        return feature.inStatusBar && feature.isEnabled;
      })
    }

    this.filterFeatures = _.memoize(filterItems,function(items) {
      return filterItems(items).map(item => item.id).join();
    });
  }

  get items() {
    return this.filterFeatures(this._settings.features);
  }

}

演示：http://plnkr.co/edit/MuYUO3neJdTs0DHluu0S?p=info

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!