Angular Ionic 2*ngFor中阻止的短信

我在我的爱奥尼亚2应用程序中使用短信。我有最新版本的Cordova CLI和最新版本的Ionic 2

当我使用

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

解决这个问题

---

爱奥尼亚2应用程序ts是否有类似的解决方案

就像@George Huang提到的那样，

DOMSanizationService

在Argular RC 6中被重命名为

DOMSanizizer

。

要避免Angular2将您的

href

标记为不安全，您只需像这样导入

DomSanitizer

：

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

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

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

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

在构造函数中创建实例：

constructor(private sanitizer: DomSanitizer, ...) { 
    //...   
}

constructor(private sanitizer: DomSanitizationService, ...) { 
    //...   
}

constructor(private sanitizer:DomSanitizer) 

然后像这样使用

bypassSecurityTrustUrl（…）

方法：

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

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

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

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>

<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>

在构造函数中创建实例：

constructor(private sanitizer: DomSanitizer, ...) { 
    //...   
}

constructor(private sanitizer: DomSanitizationService, ...) { 
    //...   
}

constructor(private sanitizer:DomSanitizer) 

然后像这样使用

bypassSecurityTrustUrl（…）

方法：

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

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

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

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>

<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>

{{item.name}

干得好，塞巴费雷拉斯！对于较新的ionic2/ng2版本。请使用以下代码：

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

将服务添加到构造函数：

constructor(private sanitizer: DomSanitizer, ...) { 
    //...   
}

constructor(private sanitizer: DomSanitizationService, ...) { 
    //...   
}

constructor(private sanitizer:DomSanitizer) 

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

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

Html视图与Sebafereras的答案相同：

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

非常感谢，我一直在看DomSanitationService的示例。但是你的解释很容易理解。我将花更多的时间在文档中，以便更好地了解这一点。很高兴我能提供帮助：）谢谢@GeorgeHuang将此发布：）