情境

當有一個連結需要另開新頁時，在 develop 或 production 需要對應到正確的路徑
Angular 提供了這個方式 https://angular.tw/api/common/Location#prepareexternalurl

實作一個外埠連結 url 的 pipe

所以我就做了以下的 pipe，在有需要的時後，直接幫我轉換

建立一個 pipe 名為 externalUrl

ng g p externalUrl

pipe.ts

import { Pipe, PipeTransform } from "@angular/core";
import { Location } from "@angular/common";
import { HttpParams } from "@angular/common/http";

@Pipe({
  name: "externalUrl",
})
export class ExternalUrlPipe implements PipeTransform {
  constructor(private location: Location) {}

  transform(url: string, ...queryParams: Object[]): unknown {
    const setQueryParams = queryParams.length
      ? `?${String(this.getQueryParams(queryParams?.[0]))}`
      : "";
    return this.location.prepareExternalUrl(url) + setQueryParams;
  }

  getQueryParams(source: any): HttpParams {
    let target: HttpParams = new HttpParams();
    Object.keys(source).forEach((key: string) => {
      const value: string | number | boolean | Date = source[key];
      if (typeof value !== "undefined" && value !== null) {
        target = target.append(key, value.toString());
      }
    });
    return target;
  }
}

使用 pipe

在 template 裡

<a [href]="'../ithome/externalUrl' | externalUrl: {name: external}">外部網址</a>

實際網址 => http://外部網址//ithome/externalUrl?name=external

用在 ts 裡，首先要先把 pipe 注入

providers: [ExternalUrlPipe],

.ts

this.externalUrlPipe.transform("../ithome/externalUrl", { name: "external" });

參考資料：
為自訂資料轉換建立管道
https://angular.tw/api/common/Location#prepareexternalurl