angular 在 href 中的 url 之前添加不安全的 - 清理不安全的 URL

问题描述

我正在尝试打开一个应用程序.当我提供静态 URL 时，它工作正常.但是当我在 *ngFor 中创建一个动态 href 标签时，我可以看到在 URL 之前添加了 unsafe 关键字并且它不起作用.

I am trying to open an app. Its working fine when I give a static URL. But as I create a dynamic href tag in *ngFor I can see unsafe keyword is added before the URL and it's not working.

我在 Angular 6 上运行.并在服务中获取 Id.在 ngFor 中，我正在循环结果并创建一个带有 Id 的链接以打开应用程序.我创建了一个管道，但它仍然无法正常工作.

I am running on Angular 6. And getting the Id in a service. In ngFor I am looping the result and creating a link with Id to open the app. I create a pipe but it's still not working.

安全管道

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(value: any) {
    return this.domSanitizer.bypassSecurityTrustUrl(value);
  }

}

在组件中，我在 ngFor 标记之间添加了以下行

In the component I added the below line between ngFor tag

<a href="appName://joinTournament?id={{t.tag}} |safeurl">Join</a>

推荐答案

您需要在插值中使用管道.按照您的方式，它只是一个字符串(href 的一部分).这意味着，angular 不会将其识别为管道或应用程序的一部分.此外，您只需要绑定值本身，而无需绑定其他任何东西.在您的情况下，您可以将 appName://joinTournament?id= 作为参数传递给管道.

You need to use your pipe within interpolation. With your way it's just a string (part of href). It means, angular does not recognize it as a pipe or part of your application. Also, you need to bind the value itself only and nothing else. In your case you can pass appName://joinTournament?id= as a parameter to the pipe.

这是一个工作解决方案.

向您的管道添加另一个参数，如下所示

Add another parameter to your pipe as follows

transform(value: any, prefix = '') {
  return this.domSanitizer.bypassSecurityTrustUrl(prefix + value);
}

改变

加入

到

<a [href]="t.tag | safeurl: 'appName://joinTournament?id='">Join</a>

这篇关于angular 在 href 中的 url 之前添加不安全的 - 清理不安全的 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！