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>
...

试图在这里的文档中找到答案（https://webdev.dartlang.org/angular/guide/template-syntax#!#expression-operators），但没有运气。

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

Answer 1

最好的方法是在你的Component控制器中声明一个为你做连接的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）。

如果您发现创建了许多奇怪的逻辑，请考虑创建更多可以为您处理此问题的小型组件。