angular - Typescript/Javascript: mailto med ämne, kropp och en lista med länkar

Jag arbetar med Angular 4. Vid klick på en hyperlänk måste jag öppna Outlook, i mailet måste jag skicka 4 länkar. Så jag har planerat att kalla på en mailto från min TypeScript-fil. Min kod är

    <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:[email ?subject=files&body=Hi";
        mail.click();
    }

Jag kan anropa funktionen men e-postmeddelandet dyker inte upp. I konsolen skrivs 111111 ut men 22222 skrivs inte ut. Var gjorde jag fel? Eller finns det ett sätt att jag kan skicka arrayen med länkar direkt från HTML?

Svar #1

du vill uppnå så här

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

i Angular kan du göra det så här, i HTML

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

i ts-fil gör så här

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

Har inte testat med Angular men kolla det med ren HTML. och det fungerar på Chrome.

Svar #2

Du kan uppnå detta i IE med ett enkelt window.location.href eftersom IE har ett konstigt beteende med mailto. Här använder jag samma <span> från din kod med links-arrayen.

Exempel på kod för 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:[email +?subject=files&body="+this.links.join(" ,"); // add the links to body
    window.location.href = this.mailText;
  }

}

Exemplet nedan kanske inte fungerar i IE, men det är testat i Chrome. Här har jag använt en ankartagg och ställt in href-attributet i TypeScript.

Exempel för Chrome och andra

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:[email +?subject=files&body="+this.links.join(" ,");
  }

}

Här är en fungerande demo: https://stackblitz.com/edit/attribute-binding-1-7wncwf

Relaterade artiklar