时间戳

首页 > 解决方案 > 在Angular 8中使用管道将不安全的URL转换为安全的问题

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

问题描述

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

我该如何解决？

标签： htmlangularangular-pipe

解决方案

<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

推荐阅读