4

我在我的 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 是否有类似的解决方案

4

2 回答 2

5

更新

就像@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>
于 2016-08-27T17:11:52.123 回答
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);
}

Html 视图与 sebaferreras 的答案相同：

<a [href]="sanitize('sms:' + item.sms)">
于 2017-02-11T21:59:42.060 回答