如何避免添加前缀“unsafe”链接Angular-2? [英] How to avoid adding prefix “unsafe” to link by Angular-2?
问题描述
我正在开发一个移动应用程序,使用 angular2
和 ionic 2
,
我有3 按钮
用于致电
,短信
和电子邮件
如下所示
I am developing a mobile app using angular2
and ionic 2
,
I have 3 buttons
for call
, sms
and email
as below
<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>
致电
和电子邮件
工作正常,但不是 sms
,似乎angular添加不安全:
in-在我的表达的前面,它将变得像下面
Call
and email
are working fine, but not sms
, it seems angular adds unsafe:
in-front of my expression and it will become like below
<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>
仍然是同一个问题,
当我不要使用角度绑定它工作正常,例如像这样
When I don't use angular binding it's working fine, for example like this
<a ion-button href="sms:+1647654654" color="secondary">
<ion-icon name="text"></ion-icon>
SMS
</a>
虽然它与angular有关但我也检查了我的 config.xml 那里允许code>和
sms
Although it's related to angular but also I checked my config.xml
and sms
is allowed there
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
更新
使用@Apuu解决方案后它变得像下面
Update
After using @Apuu solution it become like below
<a ion-button [attr.href]="'sms:'+contact.cellphone | safeUrl" color="secondary">
<ion-icon name="text"></ion-icon>
SMS
</a>
推荐答案
您可以创建管道服务来将不安全的网址更改为安全网址。
You can create a pipe service to change unsafe url to safe 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);
}
}
然后在你的视图中使用。
示例:
Then use in your view.
Example :
<a ion-button [src]="'some_url' | safeUrl" color="secondary">
<ion-icon name="text"></ion-icon>
SMS
</a>
注意:不要忘记在您的应用中注入此管道服务.module.ts
NOTE : Don't forget to inject this pipe service in your app.module.ts
import { SafeUrlPipe } from './shared/safe-url.pipe'; //make sure your safe-url.pipe.ts file path is matching.
在节点模块声明部分。
@NgModule({ declarations: [SafeUrlPipe],...});
这篇关于如何避免添加前缀“unsafe”链接Angular-2?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!