[Angular] (Tips) Angularのroutingを使わずにUrlだけ書き換える

Angularのroutingを変えずにurlだけを変えたいと場合

すごく特殊ですが、以下の理由でangular上のルーティングは変えず(遷移させず)にURLだけ変更したい、ということがありました。

• 2種類のpathから1つのページ(コンポーネント群)を呼び出したい。 (path違いでコンポーネントの状態 true/false が変わる)
• httpリクエストでデータ取得処理をコンポーネントの初期化時に実行している
• ページ遷移後に、path(状態)の行き来をしたい
• リロードした際に同じ状態で再現して欲しい

ここでいう 2種類のpathから1つのページ(コンポーネント群)を呼び出したい。というのはこういうことです。

routing.ts

// HOGEでもFUGAでも HogeIndexPageComponentへ
const routes: SsRoute[] = [
  // hoge
  {
    path: HOGE.path,
    component: HogeIndexPageComponent,
    data: HOGE.data,
  },
  // fuga
  {
    path: FUGA.path,
    component: HogeIndexPageComponent,
    data: FUGA.data,
  },
];

export const routing = RouterModule.forChild(routes);

このとき、状態を変更する際に router.navigateから遷移させると(ngOnInitなどのライフサイクルが再度回るのでhttpへのget処理などが無駄に)発生する

// 通常の遷移処理
const url: string = 'fuga';
this.router.navigate([url], {replaceUrl: true});
// fugaのルーティングとして、構成コンポーネント群のライフサイクルが1から回る

---

ということで今回とった方法として、Angularに知られずにurlを変える場合(非推奨)は history.replaceState を使う

const url: string = 'fuga';
history.replaceState('', '', url);
// urlは変わるがライフサイクルはまわらない

もしかしたらangularの中にも既存でそういうrouterオプションがあるのかもしれませんが...探しきれませんでした。