Angular属性模板中的字符串插值

Question

在Angular 6中，属性字符串插值的最佳实践是什么？

我有这段代码：

<div class="container" [ngStyle]="{'grid-template-rows': 'repeat(' + value + ', 1fr) [last-line]'}">

我想使用类似于 'repeat(${value})' 带反引号的语法。

- Pasalino

Answer 1

你可以尝试将功能移动到你的组件中，并在那里使用反引号：

calculateStyle(value: string): string {
   return `repeat(${value}, 1fr) [last-line]`;
}

在模板中：

- Ludevik

---

这对我来说不是一个好的解决方案。我认为这个逻辑必须放在模板中，而不是有一个自定义函数。 - Pasalino

为什么必须将逻辑放在模板中？将代码从模板移动到组件中带来了几个好处。如果您不喜欢在每个渲染周期调用函数，那么您可以在组件属性中重新计算样式并存储它，并使用该属性。 - Ludevik

为什么你不应该在 Angular 模板中使用方法 - https://betterprogramming.pub/why-you-should-never-use-methods-inside-templates-in-angular-497e0e11f948 - Mauricio Gracia Gutierrez

如果你的观点是基于你的模型，并且由于某种方法而改变了你的模型，那么这比调用一个方法要好得多，并且可能会得到与你5秒钟前相同的输出。MVC或MVX之所以有这种流程，是有原因的。 - undefined

在我看来，“绝对不”这个词太过强烈了；不过，我同意尽量避免直接调用函数是一个好的实践，这也是我加入这一部分的原因。 - undefined

Answer 2

我来这里是为了寻找问题的答案，虽然Mauricio根据关于在模板中使用方法的文章表达了自己的观点，但我认为这是可以根据具体情况而定的。因此，我对原始答案表示赞同。

然而，我想在模板中根据逻辑构建一个字符串 - 就像问题所述。在我对14+版本进行的测试中，使用双大括号进行字符串拼接是可行的。例如：

<someComponent
  someProperty="{{someObj?.anotherProp}}{{someVar ? ' [TEST]' : null}}">
</someComponent>

请注意在属性名称上省略了方括号。

- Adam Cox

---

随意查看这个其他讨论 - https://stackoverflow.com/questions/23302909/how-is-concatenating-urls-in-templates-in-angular-less-secure-than-in-other-loca - undefined

根据我记得的，这篇文章也很清楚地展示了如何测量模板中的方法被调用的次数，所以它并不是基于观点的，应该谨慎使用。 - undefined