Angular link 到本地主机 url

Question

我正在制作一个 angular 项目，我的其中一个链接必须重定向到另一个网站。在我的开发环境中，这是一个本地主机 url 例如 locahost:4210.

因为这是对 angular 的不安全操作，所以我尝试使用 DomSanitizer 来允许像这样使用这样的 url :

JS :

constructor(private sanitizer:DomSanitizer){ }

public sanitizeUrl(url: string) {
  return this.sanitizer.bypassSecurityTrustUrl(url);
}

HTML :

<a [href]="sanitizeUrl('localhost:4210')">My link</a>

这不起作用，因为我的浏览器控制台指示该协议未知。还有其他方法吗？

非常感谢！凯夫

Answer 1

您可以像这样实现一个促进 DomSanitizer 的安全管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}
 
 public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }
}

然后像这样使用它：

<a href="http://localhost:4210 | safe: 'url'">My link</a>

此处有更多详细信息：https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b

Angular link 到本地主机 url

Angular link to localhost url

html

angular

typescript

angular-dom-sanitizer