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

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

这里有比较好的做法吗？我应该直接从注入存储区使用该属性吗

class MyComponent {

    constructor(private store: Store) {}
}

// template

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

类MyComponent{
构造函数（私有存储：存储）{}
}
//模板
...

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

class MyComponent {

    someFlag: boolean;

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

// template

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

类MyComponent{
someFlag:boolean；
构造函数（私有存储：存储）{
this.someFlag=store.someFlag；
}
}
//模板
...

---

我最关心的是性能-从模板中的大对象访问数据是否会影响角度变化检测周期的性能？

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

第二，若您计划使用存储在模板中，请确保它在构造函数中是公共的（而不是私有的），因为它不会通过更严格的生产规则

class MyComponent {

    constructor(public store: Store) {}
}

类MyComponent{
构造函数（公共存储：存储）{}
}
//模板
...

---

这将是更好的选择。如果您创建了该变量的本地副本，那么在检测到更改时，可能会发生从不同模块/组件更改的值不会反映在该组件中的情况。

我想指出一个与该方法不同的问题：您将组件与实现全局状态的方式联系起来。通过这样做，你可以把他们紧密地结合在一起

假设你想改变你的全球状态的结构。例如，要将对象在状态层次结构中下移一级。在您的方法中，您必须触摸每个组件，每个组件可能要触摸多次

我建议让组件尽可能的愚蠢。给他们一个实际对象，他们可以将其作为

@Input（）

读取或更改。让他们来做吧。当/如果对象更改时，添加一个

@Output（）

---

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

但是如果我在几乎所有组件中都需要该状态，那么维护/@Input属性和/@Output事件是否会变得繁琐和复杂？如果它是一个“大的单例对象”正如问题中所提到的，在每个组件中都需要一个大的单例对象，我认为架构有问题。在这种情况下，是的，这将是乏味和复杂的，但这仅仅是指向其他地方问题的指针。是的，所有组件都不需要相同的“大单体对象”，但对于层次结构级别超过3的组件则不需要。除了输入/输出之外，还有其他可能的方法将数据共享到组件层次结构的4-5级吗？当然，您可以为组件提供更大的状态。这始终是一种权衡，您必须为您的具体用例找到最佳选项。我会简单地避免将相同的巨型状态对象传递给每个组件，从而失去a）灵活性，b）可测试性，c）概述。

class MyComponent {

    constructor(public store: Store) {}
}

// template

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