使用管道将 Angular 8 中的不安全转换为安全 URL 的问题

Question

我是 Angular 的新手，我正在尝试将不安全的 URL 转换为安全的 URL。我搜索以使用管道解决此问题，但我没有看到它已转换为安全的，可能是我遗漏的东西。

我的 pipe.ts 文件如下所示：

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

我的部分模板如下所示：

<tr *ngFor="let myData of data"> // Data is coming the from component.ts file

    <td> <a href='my://problem/{{myData.Id}} | safeUrl'>myLink</a></td>
</tr>

在 UI 中，当我检查时，它看起来像 unsafe: my://problem/55316480 | safeUrl。但我希望它显示为 my://problem/55316480

我该如何解决？

Answer 1

<tr *ngFor="let myData of data"> // data is coming from component.ts file

<td> <a href='my://problem/{{myData.Id}} | safeUrl'>myLink</a></td>

问题是 1) 您将字符串而不是表达式传递给 href。 2）绕过错误的属性

尝试

<td> <a [href]="('my://problem/' + myData.Id) | safeUrl">myLink</a></td>
    return this.domSanitizer.bypassSecurityTrustUrl(value);

演示： https://stackblitz.com/edit/angular-pi4mn8

Answer 2

<td> <a [href]="('my://problem/' + myData.Id) | safeUrl">myLink</a></td>

使用管道将 Angular 8 中的不安全转换为安全 URL 的问题

Problem in converting unsafe to safe URL in Angular 8 using pipes

html

angular-pipe

angular