短信在Ionic 2中被阻止* ngFor

Question

我在Ionic 2 App中使用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>

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

在ionic 1 app.js中，我使用了

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

解决这个问题。

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

Answer 1

UPADTE

就像@George Huang提到的那样，在Angular RC 6中DomSanitizationService被重命名为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>