angular - DomSanitizer 错误 "URL Segment: ' null'”

Question

最近在我们的 Angular 2 应用程序中，我们通过 iframe 添加了一个视频组件来提取外部嵌入式视频。此外，我们通过利用 DomSanitizer 的管道清理这些资源 URL。问题是我们经常(但并非始终如一)收到以下错误，并且无法加载嵌入的视频:

URL Segment: 'null'

sanitizer 管道使用示例:

<iframe [src]="(videoObservable$ | async)?.resourceUrl | sanitizeResourceUrl"></iframe>

管道方法本身:

transform(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

记录 url 参数的值表明管道最初是用参数值 null 调用的，然后紧随其后用值再次调用。

Answer 1

我发现 DomSanitizer 不能很好地处理 null 值，所以下面的修改通过检查 null 并将输入值设置为空字符串解决了这个问题卫生之前。

transform(url: string): SafeResourceUrl {
        if (!url) {
            url = '';
        }

        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }