Angular：预制对象与模板获取器

Question

我一直在想是使用一个充满 getter 的模板，还是只用一个解析器预先构造整个对象，我似乎真的无法在任何地方找到一个明确的答案。

我在下面创建了两个简化的场景。

目前，我一直在使用方案 1，但是一旦应用程序/程序变得更加复杂，我就会注意到（巨大的）性能下降，因此我正在考虑从现在开始使用方案 2。

---

场景 1：Getter 函数

• 专业人士：您只能在当前模板中获取/使用您需要的任何内容。添加新的 getter 不需要您更新接口。
• 缺点：在单个模板中有成百上千个 getter 时对性能的影响（我认为）。

代码：

var devices = ['desktop', 'tablet', 'mobile'];

var icons = {
    desktop: 'icon-desktop',
    tablet: 'icon-tablet',
    mobile: 'icon-mobile'
}

var translations = {
    desktop: 'Desktop',
    tablet: 'Tablet',
    mobile: 'Mobile'
}

getIcon(item: string): string {
    return icons(type);
}

getTranslation(item: string): string {
    return translations(type);
}

模板：

<div *ngFor="device in devices">
    <i [class]="getIcon(device)"></i>
    <span>{{ getTranslation(device) }}</span>
</div>

---

场景 2：预构建对象

• 专业人士：使用resolve，可以很容易地预先构造整个对象，从而跳过我模板中的所有getter。
• Pro：对象永远不会改变，因此 Angular 不必“监视”它。
• 缺点：对象可能会变得很大，而且很多属性可能永远不会使用。

代码：

var devices = [
    {
        item: 'desktop',
        translation: 'Desktop',
        icon: 'icon-desktop'
    },
    {
        item: 'tablet',
        translation: 'Tablet',
        icon: 'icon-tablet'
    },
    {
        item: 'mobile',
        translation: 'Mobile',
        icon: 'icon-mobile'
    }
]

模板：

<div *ngFor="device in devices">
    <i [class]="device.icon"></i>
    <span>{{ device.translation }}</span>
</div>

---

谁能告诉我每种情况的优缺点，为什么？性能怎么样（我的主要问题）？个人喜好或经验？

Answer 1

getTranslation(device) 将在每个更改检测周期被调用。这提供了性能开销，但它是微不足道的，只要 getTranslation 本身并不昂贵。

更传统的方法是使用像{{ device | translation }} 这样的管道。这可以是更有效的纯管道。但是如果语言应该是动态改变的，那么管道应该是不纯的，因为即使device的值没有改变，表达式也会得到新的值。

Answer 2

根据我在模板中调用 getter 的经验，调用的次数比函数多近 100%。您可以通过在每个中插入 console.count() 来进行测试。

根据您的应用或组件使用OnPush 更改检测策略，这将大大减少调用次数。