如何避免添加前缀"unsafe"链接Angular-2？

Question

我使用的开发移动应用程序angular2和ionic 2,我有3 buttons对call,sms并且email如下

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

Call并且email工作正常,但不是sms,似乎角度unsafe:在我的表达前面添加,它将变得像下面

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

虽然它与角度有关,但我也检查了我的config.xml并且sms被允许在那里

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

Answer 1

您可以创建管道服务以将不安全的URL更改为安全URL.

创建一个名为的管道服务safe-url.pipe.ts.

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>

注意:不要忘记在app.module.ts中注入此管道服务

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

并在您的节点模块声明部分中.

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