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）。

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