如何在带有 url 的 window.open 中使用角管道？答案

【问题标题】：How to use angular pipes in window.open with url?如何在带有 url 的 window.open 中使用角管道？
【发布时间】：2021-12-24 16:27:07
【问题描述】：

<div class="member-img" onclick="window.open(childEpisode.File_URL | fullPath)">
</div>

fullPath 是将域部分连接到 URL 的管道，即相对的 file_URL。

但它不起作用并且什么也不显示。

如果我将它与 img enter code here一起使用，那么它可以工作，但我想要我上面发布的方式。

工作示例：

 <img [src]="childEpisode.File_URL | fullPath" [alt]="childEpisode.Name_AR" class="member-thumnail img-fluid">

【问题讨论】：

标签： javascript html angular

【解决方案1】：

你可以这样实现它：

<div class="member-img" (click)="openMyLink(childEpisode.File_URL | fullPath)">

然后在YourComponent.ts文件中实现这样的方法：

openMyLink(link:string){
  window.open(link)
}

【讨论】：

【解决方案2】：

解决方案：

在 html 模板中使用 Angular 事件绑定：

<div class="member-img" (click)="openURL(childEpisode.File_URL)">...</div>

在组件 ts 文件中注入 FullPathPipe 类并使用它的 transform 方法：

constructor(private fullPathPipe: FullPathPipe) {...}

openURL(url: string) {
  const transformedURL = this.fullPathPipe.transform(url);
  window.open(transformedURL);
}

注意：

模板语句中不允许使用管道运算符。 https://angular.io/guide/template-statements#syntax
模板语句不能引用全局命名空间中的任何内容，例如window 或document。 https://angular.io/guide/template-statements#statement-best-practices

【讨论】：