在angular2模板中访问私有属性的有效方法是什么?

时间:2018-01-08 10:30:07

标签: angular typescript

我有一个类UserList,其中包含一个私有内部变量,该变量仅供访问者函数使用。如何在ngFor绑定中以高效的方式访问该内部列表?

class UserList {
  private users:user[] = []
  public addUser():void{..} 
  public removeUser():void{..}
  public listUsers():user[]{
    return this.users; //this is the only way to access the private users list
  } 
}

然后在某个组件中..

@component ({...})
class AppComponent {
  users:UserList = new UserList();
}

在该组件的模板中,调用getter函数..

<span *ngFor="let user in users.listUsers()">
  {{ user.username }}
</span>

很明显,这并不能很好地发挥作用,因为角度可能无法知道此列表何时发生变化,并且必须不断调用users.listUsers()以保持视图更新。我可以以某种方式限制此行为并通知Angular列表已更改某些事件?我不想公开列表,我也不想直接在模板中访问私有财产。

参考文献: Angular2 - should private variables be accessible in the template?

使用解决方案更新:

Amit建议使用OnPush变化检测。我在用户服务中构建了一个回调,以通知任何使用它的组件更改私有用户列表。然后,app组件可以调用markForChange()来更新视图。这让我刷新视图而不破坏依赖注入模式或我试图强制执行的封装。

我仍然对此方法感到不满意,因为更改检测方案会影响整个组件而不影响元素。对我来说,似乎奇怪的是Angular无法有效地将函数的结果绑定到元素而不会创建性能下沉或破坏设计模式,或者重新配置整个组件以观察该行为。

2 个答案:

答案 0 :(得分:1)

您可以使用OnPush更改检测策略,并在您知道列表更改后立即标记组件以检测更改。

答案 1 :(得分:1)

这不应该。我要求你不要这样做。它会打破DI
请从您的服务中调用您的私人数据,并为模板制作公共变量