如何在Angular/TypeScript中实现点击邮箱打开Gmail发送邮件

方法1：直接使用HTML链接（最简单） #

直接通过<a>标签构造Gmail的邮件撰写链接，点击后会直接打开Gmail的撰写界面并自动填充收件人：

<!-- 基础版：仅指定收件人 -->
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=example@test.com" target="_blank">
  发送邮件给example@test.com
</a>

<!-- 进阶版：附带主题、抄送、正文 -->
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=example@test.com&cc=cc@test.com&subject=邮件主题&body=这是邮件正文内容" target="_blank">
  带参数发送邮件
</a>

参数说明：

• to：目标收件人邮箱
• cc：抄送邮箱（可选）
• subject：邮件主题（可选，特殊字符需编码）
• body：邮件正文（可选，换行用%0D%0A代替）

方法2：TypeScript动态处理（适合动态参数场景） #

如果收件人、主题等参数需要从组件数据中动态获取，可在组件类中编写点击事件处理逻辑：

组件HTML：

<button (click)="openGmailCompose()">打开Gmail发邮件</button>

组件TypeScript：

export class MailComponent {
  // 动态获取的收件人、主题等参数
  targetEmail = 'dynamic@example.com';
  mailSubject = '来自Angular的邮件';
  mailBody = '您好，这是通过Angular触发的Gmail邮件';

  openGmailCompose(): void {
    // 对特殊字符进行编码，避免链接失效
    const encodedSubject = encodeURIComponent(this.mailSubject);
    const encodedBody = encodeURIComponent(this.mailBody);
    const gmailUrl = `https://mail.google.com/mail/?view=cm&fs=1&to=${this.targetEmail}&subject=${encodedSubject}&body=${encodedBody}`;
    
    // 在新窗口打开Gmail
    window.open(gmailUrl, '_blank');
  }
}

注意事项 #

• 必须通过用户主动点击触发（比如按钮、链接点击），避免浏览器因弹窗拦截策略阻止打开新窗口。
• 如果用户未登录Gmail，会先跳转到登录界面，登录后自动进入撰写页。
• 中文、空格等特殊字符必须用encodeURIComponent编码，否则链接会失效。

内容的提问来源于stack exchange，提问作者itty