如何根据从Ionic API中获取的详细信息应用超链接

Question

我正在从事Ionic项目，并且我拥有联系页面，该页面正在从API中获取详细信息。我想根据获取的详细信息应用超链接，就像它是手机号码一样，然后应用tel并应用电子邮件mailto。

这是我的 contact.html ：

<ion-content padding overflow-scroll="true">
  <ion-grid align-items-center justify-content-center>
    <ion-row align-items-center justify-content-center>
      <ion-col class="mycol22" col-12 *ngFor="let contdetails of this.detailscontact">
          <h3 class="myneh31">{{contdetails?.sub_head}}</h3>
          <hr />
          <a href="tel or mailto"><p class="newmyp2">{{contdetails?.sub_content_first}}</p></a>
          <a href="tel or mailto"><p class="newmyp2">{{contdetails?.sub_content_second}}</p>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

问题在于，如何根据获取的值确定是应用tel还是mailto。这是我从API获取的详细信息的输出。现在，我想根据从API获取的详细信息应用超链接。对于电子邮件：mailto将适用，对于手机号码：tel将适用。

非常感谢您的帮助。

Answer 1

首先，您必须检查数据是否为电子邮件类型。将此功能用作电子邮件验证器。

emailValidator(email:string): boolean {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (!EMAIL_REGEXP.test(email)) {
        return false;
    }
    return true; 
}

在您的html页面

<a href="{{emailValidator(email) == true ? 'mailto' || 'tel'}}"></a>

为了使自己更轻松，您可以从emailValidator函数返回字符串：

emailValidator(email:string): string {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (!EMAIL_REGEXP.test(email)) {
        return 'mailto';
    }
    return 'tel'; 
}

，在HTML中，您可以使用

<a href="{{emailValidator(email)}}"></a>

Answer 2

* ng如果应该派上用场：

  <a href="tel" *ngIf="condition">...</a> // or any boolean as condition
  <a href="mailto" *ngIf="!condition">...</a>  // or any other condition