Blazor WebAssembly: クエリパラメーターからパスパラメーターに変更する

github.com

github.com

tsubakimoto/toumei-blazor で元々カラーコードはクエリパラメーターで受け取っていた。
ただ、パラメーターといっても1種類しかないので、パスパラメーター /palette/{カラーコード} に変えることにする。

docs.microsoft.com

パスパラメーターを受け付けたい Razor コンポーネントにて以下の実装を行う。

1. @page ディレクティブに省略可能なパスパラメーターを定義する
2. @code ディレクティブにパスパラメーターをセットするプロパティを定義する
3. パスパラメーターが指定されない場合は既定値をセットする

コードで説明すると下記となる。

@page "/palette/{color?}" // #1
@inject IJSRuntime JS
@inject NavigationManager NavManager

/* 中略 */

@code {
  // #2
  [Parameter]
  public string Color { get; set; }

  protected override void OnParametersSet()
  {
    Color = Color ?? "000000"; // #3
  }

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    await JS.InvokeVoidAsync("CalcColor", Color);
  }
}