SMS-сообщения заблокированы в Ionic 2 * ngFor

Я использую SMS-сообщения в своем приложении ionic 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>

SMS появляется как небезопасное: смс: 14038000000

В ionic 1 app.js я использовал

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

Чтобы решить эту проблему.

Есть ли подобное решение для Ionic 2 app.ts?


typescript cordova angular ionic3 ionic2
person Thomas Degroot    schedule 25.08.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Хорошая работа, себаферрерас! Для более новой версии 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)">
person George Huang    schedule 11.02.2017
comment
Спасибо @GeorgeHuang за это :) - person sebaferreras; 10.11.2017

arrow_upward
5
arrow_downward

ОБНОВИТЬ

Как упомянул @George Huang, DomSanitizationService был переименован в DomSanitizer в Angular RC 6.

Все, что вам нужно сделать, чтобы 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>
person sebaferreras    schedule 27.08.2016
comment
Большое спасибо, я смотрел примеры DomSanitizationService. Но ваше объяснение было легко понять. Я собираюсь потратить еще немного времени на документы, чтобы лучше понять это. - person Thomas Degroot; 28.08.2016
comment
Рад, что смог помочь :) - person sebaferreras; 28.08.2016