在 Angular 2 中使用字符串插值生成电子邮件链接答案

【问题标题】：Generating Email Links with String Interpolation in Angular 2在 Angular 2 中使用字符串插值生成电子邮件链接
【发布时间】：2017-02-02 23:53:07
【问题描述】：

在我的 Angular 2 应用程序中，我使用 md-menu 和 md-icon-button 来显示带有电子邮件地址的弹出窗口。我希望弹出的电子邮件地址在单击时实际触发用户的默认电子邮件设置。因为我通过字符串插值提取数据，所以我还需要使用字符串插值生成这些电子邮件。这就是我现在拥有的：

<md-menu #emailMenu="mdMenu">
<button md-menu-item>{{record.email}}</button>
</md-menu>

<button md-icon-button [mdMenuTriggerFor]="emailMenu">
<md-icon>mail_outline</md-icon>
</button>

您在哪里看到 {{record.email}}，这就是我需要构建它以便触发默认电子邮件行为的地方（基本上就像一个 mailto: 函数）。我如何在 Angular 2 中做到这一点？

我会做这样的事情吗？

<button md-menu-item><a href="mailto:{{record.email}}"></a></button>

或者有更好的方法吗？

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案1】：

您可以绑定到 href 属性：

<a [href]="'mailto:' + record.email"></a>

【讨论】：

使用字符串插值，这会引发错误：
是的，这里不需要插值大括号 {{..}}，因为您将表达式绑定到 [href] 属性
出于某种原因，我不得不在我的 NgDialog 中添加一个:focus {outline:0;}，否则它总是会有一个蓝色的轮廓。