Question

我在Angular 4上工作。点击超链接我必须打开outlook，在邮件中我将发送4个链接。所以我打算从我的打字稿文件中调用mailto。我的代码是

    <span (click)="mailMe()">Mail me the links</span>


    var links= ["link1.com", "link2.com", "link3.com"];
    mailMe(){
        console.log("111111");
        var mail = document.createElement("a");
        console.log("22222");
        mail.href = "mailto:abc@abc.com?subject=files&body=Hi";
        mail.click();
    }

我可以调用该函数但邮件没有弹出。在控制台中111111正在打印，但22222未打印。我哪里做错了？或者有没有办法从HTML本身发送链接数组？

Answer 1

你想要达到这样的目标

<a href="mailto:xyz@example.com?Subject=Hello&body=links:  %0D 
         http://link1.com  %0D http://link1.com " target="_top">Send Mail</a>

在角度你可以这样做，在html中

<a [href]="emailstring" target="_top"></a>

ts文件中的

是这样的

 emailstring= "mailto:xyz@example.com?Subject=Hello&body=links:  %0D 
             http://link1.com  %0D http://link1.com";

没有测试角度，但用纯HTML检查。以及它在chrome上的工作。

Answer 2

这是简单的HTML JavaScript代码。这将有助于您自己编写。

<!DOCTYPE html>
<html>
<head>
<script>
    function mailMe (mail) // <--- element on which you need to apply click
    {
        mail = document.createElement("a");
        mail.href = "mailto:abc@abc.com?subject=files&body=Hi";
        mail.click();
    }
</script>
</head>
<body>
    <span onClick = "mailMe(this);" >  <!-- pass it from here -->
         Mail me the links
    </span >
</body>
</html>

Answer 3

你可以在IE中使用简单的window.location.href来实现这一点，因为IE在mailto上有一些奇怪的行为。我在你的代码中使用<span>与links数组。

IE的示例代码：

import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
     <span (click)="mailMe()">Mail me the links on (click)</span>
  `
})
export class AppComponent {
  name = 'test';
  links : any[]= ["link1.com", "link2.com", "link3.com"];

  mailText:string = "";

  mailMe(){
    this.mailText = "mailto:abc@abc.com+?subject=files&body="+this.links.join(" ,"); // add the links to body
    window.location.href = this.mailText;
  }

}

以下示例可能无法在IE中运行，但已在Chrome中进行了测试。这里我使用了锚标记并在typescript中设置了href属性。

Chrome和其他人的示例

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
     <a [href]="mailText">Mail me the links</a> <br>
  `
})
export class AppComponent implements OnInit {
  name = 'test';
  links : any[]= ["link1.com", "link2.com", "link3.com"];

  mailText:string = "";


  ngOnInit(){
    this.mailText = "mailto:abc@abc.com+?subject=files&body="+this.links.join(" ,");
  }

}

这是一个有效的演示：https://stackblitz.com/edit/attribute-binding-1-7wncwf

Answer 4

您可以使用模板中的函数来实现更复杂的变量构建

<a [href]="mailto('example@mail.com', 'newSubject')">

然后在您的TS文件中仅返回正确的锚href字符串

mailto(emailAddress: string, emailSubject: any) {
    return "mailto:" + emailAddress + "?subject=" + emailSubject
}

打字稿/ Javascript：包含主题，正文和链接数组的mailto

4 个答案: