在 Ionic 2 *ngFor 中阻止的 SMS 消息答案

【问题标题】：SMS messages blocked in Ionic 2 *ngFor在 Ionic 2 *ngFor 中阻止的 SMS 消息
【发布时间】：2017-01-02 03:57:34
【问题描述】：

我在我的 ionic 2 应用程序中使用 SMS 消息。我有最新版本的 Cordova CLI 和最新版本的 Ionic 2。

当我使用时

<a href="sms:14038000000"><button outline><ion-icon name="ios-chatbubbles"></ion-icon></button></a>

它可以作为短信正常工作：14038000000，

当我使用时

<ion-card *ngFor="let item of corp">
    <div class="contact-name">
        {{ item.name}}
    </div>
    <div class="contact-content">
        <a href="sms:{{item.sms}}"><button outline><ion-icon name="ios-chatbubbles"></ion-icon></button></a>
    </div>
</ion-card>

短信显示为不安全：短信：14038000000

在 ionic 1 app.js 中我使用了

.config(function($compileProvider){
   $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|http?|ftp|mailto|file|sms|tel):/);
})

解决这个问题。

Ionic 2 app.ts 是否有类似的解决方案

【问题讨论】：

标签： angular cordova typescript ionic2 ionic3

【解决方案1】：

UPADTE

就像@George Huang 提到的那样，DomSanitizationService 在 Angular RC 6 中被重命名为 DomSanitizer。

要避免 Angular2 将您的 href 标记为不安全，您需要做的就是像这样导入 DomSanitizer：

import { DomSanitizer } from '@angular/platform-browser';

在你的构造函数中创建一个实例：

constructor(private sanitizer: DomSanitizer, ...) { 
    //...   
}

然后像这样使用bypassSecurityTrustUrl(...) 方法：

sanitize(url:string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

最后，在您看来，使用该方法：

<ion-content>
  <ion-card *ngFor="let item of corp">
    <div class="contact-name">
        {{ item.name}}
    </div>
    <div class="contact-content">
        <a [href]="sanitize('sms:' + item.sms)"><button outline><ion-icon name="ios-chatbubbles"></ion-icon></button></a>
    </div>
</ion-card>
</ion-content>

旧答案：

为了避免 Angular2 将您的 href 标记为不安全，您需要做的就是像这样导入 DomSanitizationService：

import { DomSanitizationService } from '@angular/platform-browser';

在你的构造函数中创建一个实例：

constructor(private sanitizer: DomSanitizationService, ...) { 
    //...   
}

然后像这样使用bypassSecurityTrustUrl(...) 方法：

sanitize(url:string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

最后，在您看来，使用该方法：

<ion-content>
  <ion-card *ngFor="let item of corp">
    <div class="contact-name">
        {{ item.name}}
    </div>
    <div class="contact-content">
        <a [href]="sanitize('sms:' + item.sms)"><button outline><ion-icon name="ios-chatbubbles"></ion-icon></button></a>
    </div>
</ion-card>
</ion-content>

【讨论】：

非常感谢，我一直在查看 DomSanitizationService 的示例。但是你的解释很容易理解。我将在文档中花费更多时间来更好地理解这一点。
很高兴我能帮上忙 :)

【解决方案2】：

干得好 sebaferreras！对于较新的 ionic2/ng2 版本。请使用以下代码：

import { DomSanitizer } from '@angular/platform-browser';

将服务添加到构造函数：

constructor(private sanitizer:DomSanitizer)

方法：返回类型使用any。有人说使用 SafeUrl，但不知何故新服务没有。

public sanitize(url: string):any {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

与 sebaferreras 的回答相同的 HTML 视图：

<a [href]="sanitize('sms:' + item.sms)">

【讨论】：

感谢@GeorgeHuang 提出这个:)