Javascript 在mailto:string中使用es6模板文本未按预期工作

在我的Typescript驱动的Angular 2应用程序中，我正在生成一封包含一些预填充信息的电子邮件。这将使用用户的默认电子邮件客户端生成电子邮件。当前，当我在组件中构建如下字符串时，这一点可以正常工作：

greetingEmail = `user@example.com?subject=Family%20Greeting%20Email&body=message%20goes%20here`;

我在视图中的href中使用此选项。我的相关视图代码如下所示：

<a [href]="'mailto:' + greetingEmail" tabindex="-1">Generate Greeting Email</a>

---

在这种情况下，template literal选项不起作用，或者字段在运行时未定义，有什么特殊原因吗？还是有其他问题？

我看到的最大问题是变量。在Angular2中，它将是：

emailAddress:string = 'user@example.com';
subject:string =  'Family Greeting Email';
body:string = 'This is where the body of the email goes...';

sendEmail = this.emailAddress + '?subject=' + this.subject + '&body=' + this.body`;

---

我是受@Rob关于这个和范围的评论的启发，通过一个调整得到这个结果的。一旦我将变量放入一个对象中，并从该上下文中调用，template literal选项就会起作用：

emailProps = {
    emailAddress: 'user@example.com',
    subject: 'Family Greeting Email',
    body: 'This is where the body of the email goes...'
};

greetingEmail = `${this.emailProps.emailAddress}?subject=${this.emailProps.subject}&body=${this.emailProps.body}`;

---

在哪里使用它？这里没有任何人可以用来诊断的上下文。如果这是正确的绑定，那么就可以了。您希望有什么额外的上下文可以帮助您？我已经解释过第一个选项有效，但第二个选项无效。我还列出了我的视图和组件代码，并提到这是一个Angular应用程序。不确定什么其他上下文有助于诊断问题。例如，什么是emailAddress:'user@example.com'; 因为没有任何其他信息，它是一个JS标签，带有立即丢弃的立即字符串。“emailAddress”包含将输入字符串文本的值。“主体”和“身体”也是如此。我所做的就是在组件中将这些列为属性，然后在构造的字符串文本中使用它们。也许其他人可以插话，但我相信你已经掌握了理解我在这里所问问题所需的一切。因此，这里你没有使用模板文本。第二，虽然我可以选择定义类型，但我不必这样做，对吗？所以我仍然不清楚为什么我的例子不起作用。不要忘了在每件事上使用encodeURIComponent检查这个范围我想我只需要在用户提供的输入上使用encodeURIComponent。这里不是这样，我想你已经了解了这个问题。这是范围。当我将变量放在一个对象中，并在模板文本中从该上下文调用时，它就起作用了。上面贴出了答案。别忘了对值进行编码，因为一个主题或主体可能总是有一个=或？或者任何其他不确定的查询参数值。不是为了竖琴，但这正是我最初说的，包括关于这个、绑定和上下文的部分。我还想补充一点，如果你使用的是Typescript或类似的东西，那么应该在问题和语言标签中注明。@DaveNewton虽然我同意特别提到Typescript会是一个好主意，我确实在之后将它添加到标签中，但我仍然相信，除此之外，我给出了所有相关的上下文来回答我所问的问题。此外，虽然我找到了一个解决办法，但我仍然不清楚第一个选项为什么不起作用。看起来它应该在功能上相当。

emailProps = {
    emailAddress: 'user@example.com',
    subject: 'Family Greeting Email',
    body: 'This is where the body of the email goes...'
};

greetingEmail = `${this.emailProps.emailAddress}?subject=${this.emailProps.subject}&body=${this.emailProps.body}`;