我在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 本身发送链接数组？
你想像这样实现
<a href="mailto:xyz@example.com?Subject=Hello&body=links: %0D
http://link1.com %0D http://link1.com " target="_top">Send Mail</a>
在 Angular 中你可以这样做，在 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 进行检查。 及其在铬上的工作。
您可以通过简单的window.location.href在IE中实现这一点，因为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中进行了测试。在这里，我使用了锚标签并在打字稿中设置了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
这是简单的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>
您可以使用模板中的函数来实现更复杂的变量构建
<a [href]="mailto('example@mail.com', 'newSubject')">
然后在您的 TS 文件中只需返回正确的锚 href 字符串
mailto(emailAddress: string, emailSubject: any) {
return "mailto:" + emailAddress + "?subject=" + emailSubject
}
<a href="mailto:{{email}}">Contact via E-mail</a>
这适用于角度应用程序的 HTML 文件
要创建 Mailto 链接，您需要使用 HTML 标记及其 href 属性，并在它后面插入一个 "mailto：" 参数，如下所示：
<a href="mailto:username@gmail.com">
或
<a href="https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=username@gmail.com" target="_blank">username@gmail.com</a>