Question

我正在使用我的离子2应用程序中的短信。我有最新版本的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

在离子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)

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

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

Html视图与sebaferreras的答案相同：

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

短信息在Ionic 2 * ngFor中被阻止

2 个答案: