Ionic 2 *ngFor 中阻止的短信

Question

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

当我使用

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

作为 sms: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

在离子 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提到的，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>

Answer 2

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

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

将服务添加到构造函数：

constructor(private sanitizer:DomSanitizer)

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

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

Html 与 sebaferreras 的回答相同：

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

Ionic 2 *ngFor 中阻止的短信

SMS messages blocked in Ionic 2 *ngFor

cordova

typescript

ionic2

ionic3

angular