Angular 2 Dart：模板语法 - 如何连接字符串？

Question

感觉像是一个愚蠢的问题，但我不明白。如何在 Angular 2 Dart 模板中进行快速字符串连接？

我的组件有一个单独的 html 文件让我们说 my_component.html:

作品：

....
<div id="abc">
{{order.pickupPlace.email}}
</div>
...

作品：

....
<div id="abc">
{{ ((order.pickupPlace.state) ? order.pickupPlace.state+" ":'')}}
</div>
...

无效：

....
<div id="abc">
{{"<br/>"+order.pickupPlace.email}}
</div>
...

无效：

....
<div id="abc">
{{order.pickupPlace.name+" "+order.pickupPlace.email}}
</div>
...

当然，我可以在每个有条件输出的元素上使用 *ngIf，但是有没有简单的字符串连接方法？

Answer 1

最好的方法是在您的组件控制器中声明一个 getter 来为您进行连接，您将获得 dart 语法支持并且 html 模板看起来更干净。

String get myConcatenation => "${order.pickupPlace.name}${order.pickupPlace.email}";


<div id="abc">
   {{myConcatenation}}
</div>

Answer 2

最后两个例子可以很容易地工作：

<div id="abc">
  <br/>{{order.pickupPlace.email}}
</div>

并且：

<div id="abc">
  {{order.pickupPlace.name}} {{order.pickupPlace.email}}
</div>

Angular 处理得很好。如果你需要一些更复杂的逻辑，你可以将它移到 Dart 代码中（但你不能在那里轻易使用 HTML）。

如果您发现创建了很多奇怪的逻辑，请考虑创建更小的组件来为您处理。

Angular 2 Dart: Template syntax - how to concatenate strings?