Question

我是Angular的新手，我正在尝试将我的不安全网址转换为安全网址。我搜索了[here] [How to avoid adding prefix “unsafe” to link by Angular2?，以使用管道解决此问题，但我看不到它转换为安全的，可能是我所缺少的。

我的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);
  }

}

Part of my template looks as below:

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

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

```

在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>

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

2 个答案: