angularjs – 如何避免通过Angular-2链接添加前缀“unsafe”？

参见英文答案 > In RC.1 some styles can’t be added using binding syntax                                    1个
我正在使用angular2和ionic 2开发移动应用程序,
我有3个按钮,用于拨打电话,短信和电子邮件,如下所示

<a ion-button href="tel:{{Contact.cellphonE}}" color="priMary">
            <ion-icon name="call"></ion-icon>
            Call
          </a>
          <a ion-button href="sms:{{Contact.cellphonE}}" color="secondary">
            <ion-icon name="text"></ion-icon>
            SMS
          </a>
          <a ion-button href="mailto:{{Contact.email}}" color="dark">
            <ion-icon name="mail"></ion-icon>
            Email
          </a>

电话和电子邮件工作正常,但不是短信,似乎角度添加不安全：在我的表达前面,它将变为如下

<a color="secondary" ion-button="" ng-reflect-color="secondary" class="button button-md button-default button-default-md button-md-secondary" ng-reflect-href="unsafe:sms:+16475374201" href="unsafe:sms:+16475374201"><span class="button-inner">

即使我试过这个

<a ion-button [attr.href]="'sms:'+contact.cellphone" color="secondary">
        <ion-icon name="text"></ion-icon>
        SMS
      </a>

还是一样的问题,

当我不使用角度绑定时,它工作正常,例如像这样

<a ion-button href="sms:+1647654654" color="secondary">
            <ion-icon name="text"></ion-icon>
            SMS
          </a>

虽然它与angular有关,但我也检查了我的config.xml,并允许短信存在

<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

更新

使用@Apuu解决方案后,它变得如下

<a ion-button [attr.href]="'sms:'+contact.cellphone | safeUrl" color="secondary">
            <ion-icon name="text"></ion-icon>
            SMS
          </a>

import { Pipe,PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer) {}
  transform(url) {
    return this.domSanitizer.bypassSecurityTrustresourceUrl(url);
}
}

<a ion-button [src]="'some_url' | safeUrl" color="secondary">
     <ion-icon name="text"></ion-icon>
     SMS
</a>

import { SafeUrlPipe } from './shared/safe-url.pipe'; //make sure your safe-url.pipe.ts file path is matching.

@NgModule({ declarations: [SafeUrlPipe],...});