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

我想指出一种与该方法有关的问题：将组件与实现全局状态的方式联系起来。这样，您就可以将它们紧密耦合。

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

我建议尽可能使组件保持愚蠢状态。给他们一个可以读取或更改为@Input()的实际对象。让他们继续努力。如果对象发生更改，请添加@Output()。

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

Answer 3

class MyComponent {

    constructor(public store: Store) {}
}

// template

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

这将是更好的选择。就像您对该变量进行本地复制一样，然后在进行更改检测时，可能会发生以下情况：从其他模块/组件更改后的值将不会反映在该组件中。

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

3 个答案: