从外部对象绑定模板中的数据是一种不好的做法吗？

Question

假设我有一个商店（一个大的单例对象），我在其中保存一般应用程序状态。如果需要，此存储将注入到组件中。但是，有些组件只使用商店中的一个属性，并将其用于模板中的条件（当然是只读的）。

这里有首选做法吗？我应该直接从注入的商店使用该属性

class MyComponent {

    constructor(private store: Store) {}
}

// template

<div *ngIf="store.someFlag">...</div>

或者我应该在组件中创建私有属性，然后在模板中使用它？

class MyComponent {

    someFlag: boolean;

    constructor(private store: Store) {
        this.someFlag = store.someFlag;
    }
}

// template

<div *ngIf="someFlag">...</div>

我最关心的是性能 - 从模板中的大对象访问数据会影响 Angular 更改检测周期的性能吗？

Answer 1

首先，我更喜欢直接使用 store.someFlag ，因为该属性可能会发生变化，并且会立即反映在页面上，而如果将其分配给局部变量，则该变量不会随着时间的推移而改变（除非你做某事）。 如果您计划在本地更改该值并且不希望将更改传播回存储，则分配给变量是有意义的。当我想让我的应用程序日期最初应用于此屏幕时，我会这样做，但屏幕可以更改本地日期并根据用户的喜好强制执行。

其次，如果您打算在模板中使用 store，请确保在构造函数中将其设为公开（而非私有），因为它不会通过更严格的生产规则。

class MyComponent {

    constructor(public store: Store) {}
}

Answer 2

class MyComponent {

    constructor(public store: Store) {}
}

// template

<div *ngIf="store.someFlag">...</div>

这将是更好的选择。就好像您制作了该变量的本地副本，然后在更改检测时，您的值从不同的模块/组件更改时可能不会反映在此组件中。

Answer 3

我想指出我在该方法中看到的另一个问题：您将组件与实现全局状态的方式联系起来。通过这样做，您可以将它们紧密耦合。

假设您想更改全局状态的结构。例如，您希望将对象在状态层次结构中下移一级。使用您的方法，您将不得不触摸每个组件，可能每个组件多次。

我会建议让组件尽可能愚蠢。给他们一个他们可以读取或更改为@Input() 的实际对象。让他们努力。当/如果对象更改时添加@Output()。

这样，您可以更清楚地分离关注点：组件只需要知道如何处理一个特定的类，而不是整体状态。