如何在 window.open 和 url 中使用 angular 管道？

Question

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

the fullPath is a pipe that concatenates the domain part to the URL ie file_URL which is relative.

but it doesn't work and shows nothing.

If I use it with img enter code here then it works but i want it the way I have posted above.

working example:

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

Answer 1

you can implement it like this:

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

then in YourComponent.ts file implement the method like this:

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

Answer 2

Solution:

In html template use Angular Event binding:

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

In the Component ts file inject the FullPathPipe class and use it's transform method:

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

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

Note:

• The pipe operator is not allowed within Template statements. https://angular.io/guide/template-statements#syntax
• Template statements cannot refer to anything in the global namespace such as window or document . https://angular.io/guide/template-statements#statement-best-practices