テンプレートコンポーネントについて知る

Blazor WebAssembly アプリケーションでは、 レイアウトの仕組みを用いて 各ページに共通の メニューやヘッダーを表示しています。 画面は Blazor WebAssembly アプリケーションのページ用の コンポーネントです。 @page ディレクティブで このファイルが / という URL に対応した ページであることを宣言しています。 その後にコンテンツの HTML が 続きます。 そして、SurveyPrompt という 子コンポーネントを 呼び出しています。 ここにはヘッダーやメニューの情報は 記述されていません。 しかしアプリケーションを実行すると、 このようにページの左側に 先ほどの HTML にはなかった メニューなどが表示されています。 これがレイアウトの仕組みです。 このレイアウトの仕組みは ソリューションエクスプローラーの App.razor というファイルを 開くことで確認することができます。 このファイルで RouteView、RouteData というところで MainLayout というレイアウトを 設定しています。 この MainLayout は Shared の中にある MainLayout.razor ファイルです。 このように NaviMenu という ナビゲーション用のコンポーネントを 呼び込んでます。 この部分に先ほどの 各ページ用のコンポーネントの中身を 表示するという記述です。 それ以外のコンポーネントと異なり、 レイアウト用のコンポーネントは ＠inherits というディレクティブを用いて LayoutComponentBase を 継承しています。 それ以外のコンポーネントは ComponentBase というクラスを 継承しています。 このレイアウトを別のレイアウトに 変更してみましょう。 NewLayout.razor という ファイルを作成します。 そして、LayoutComponentBase を 継承し、そして@body を設定します。 レイアウトを変更するには、 App.razor の先ほどの設定の部分を 書き換えます。 NewLayout としましょう。 タグにも MainLayout の記述がありますが、 こちらは Not found、 URL が見つからない場合の レイアウトです。…