Question

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

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

安全管道

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标签之间添加了以下行

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

Answer 1

您需要在插值中使用管道。用你的方式，它只是一个字符串（href的一部分）。这意味着，角度不会将其识别为管道或应用程序的一部分。另外，您只需要绑定值本身，而不必绑定其他任何东西。您可以将appName://joinTournament?id=作为参数传递给管道。

这里是working solution.

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

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

然后改变

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

到

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

在href中的网址之前添加不安全的角度-清理不安全的网址

1 个答案: