Typescript/Javascript：带有主题、正文和链接数组的 mailto
[英]Typescript/Javascript: mailto with subject, body and array of links
问题描述
I work on Angular 4. On click of hyperlink I have to open outlook, in the mail I will have to send 4 links.
我在 Angular 4 上工作。单击超链接时，我必须打开 outlook，在邮件中我必须发送 4 个链接。 So I have planned to call a mailto from my typescript file.所以我计划从我的 typescript 文件中调用一个mailto 。 My code is我的代码是
<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();
}
I am able to call the function but mail is not popping up.我可以拨打 function，但没有弹出邮件。 In console 111111 is getting printed but 22222 is not getting printed.在控制台中，正在打印111111 ，但未打印22222 。 Where did I go wrong?我go哪里错了？ OR is there a way I can send the array of links from HTML itself?或者有没有办法可以从 HTML 本身发送链接数组？
6 个解决方案
解决方案1
13 2018-06-01 07:20:18
you want to achieve like this你想达到这样的
<a href="mailto:xyz@example.com?Subject=Hello&body=links: %0D
http://link1.com %0D http://link1.com " target="_top">Send Mail</a>
in angular you can do it like this , in html在 angular 你可以这样做，在 html 中
<a [href]="emailstring" target="_top"></a>
in ts file do like this在 ts 文件中这样做
emailstring= "mailto:xyz@example.com?Subject=Hello&body=links: %0D
http://link1.com %0D http://link1.com";
Haven't tested with angular but check it with pure html.尚未使用 angular 进行测试，但使用纯 html 进行检查。 and its working on chrome.及其在 chrome 上的工作。
解决方案2
8 2018-06-01 07:35:53
You can achieve this in IE with a simple window.location.href as IE has some weird behavior with mailto .Here I am using the same <span> from your code with the links array.您可以在 IE 中使用一个简单的window.location.href来实现这一点，因为 IE 对mailto有一些奇怪的行为。在这里，我使用与links数组相同的代码中的<span> 。
Example code for IE : 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;
}
}
The below example might not work in IE but it's tested in Chrome.下面的示例可能无法在 IE 中运行，但已在 Chrome 中进行了测试。 Here i have used anchor tag and set the href attribute in typescript.在这里，我使用了锚标记并在打字稿中设置了href属性。
Example for Chrome and others 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(" ,");
}
}
Here is a working demo : https://stackblitz.com/edit/attribute-binding-1-7wncwf这是一个工作演示： https : //stackblitz.com/edit/attribute-binding-1-7wncwf
解决方案3
0 2018-06-01 07:26:56
Here is the simple HTML JavaScript code.这是简单的 HTML JavaScript 代码。 This will help you to write your own.这将帮助您编写自己的程序。
<!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>
解决方案4
0 2020-08-27 12:31:37
You can use a function from the template to achieve more complexe variable building您可以使用模板中的函数来实现更复杂的变量构建
<a [href]="mailto('example@mail.com', 'newSubject')">
Then in your TS file just return the proper anchor href string然后在您的 TS 文件中只返回正确的锚点 href 字符串
mailto(emailAddress: string, emailSubject: any) {
return "mailto:" + emailAddress + "?subject=" + emailSubject
}
解决方案5
-1 2021-05-23 07:50:20
To create a Mailto link, you need to use the HTML tag with its href attribute, and insert a "mailto:" parameter after it, like the following:要创建 Mailto 链接，您需要使用带有 href 属性的 HTML 标记，并在其后插入一个“mailto:”参数，如下所示：
<a href="mailto:username@gmail.com">
or或者
<a href="https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=username@gmail.com" target="_blank">username@gmail.com</a>
解决方案6
-1 2022-02-21 10:27:22
<a href="mailto:{{email}}">Contact via E-mail</a>
this works in HTML file of an angular app这适用于 angular 应用程序的 HTML 文件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.