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

Posted 2023-03-13

【中文标题】在 Ionic 2 *ngFor 中阻止的 SMS 消息

【英文标题】：SMS messages blocked in Ionic 2 *ngFor

【发布时间】：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 是否有类似的解决方案

【参考方案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 提出这个:)