如何在 Angular 取得当前页面的绝对路径

情境

当有一个连结需要另开新页时，在 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