演習 - コンポーネントを追加する

完了

この演習では、アプリケーションのホーム ページに Razor コンポーネントを追加します。

ホーム ページに Counter コンポーネントを追加する

1. Visual Studio ソリューション エクスプローラーでフォルダーを展開します。 ソリューション エクスプローラーが表示されていない場合は、[表示]>[ソリューション エクスプローラー] の順に選択します。

2. Components/Pages を選んで、既存の Razor ページを表示します。

3. Home.razor ファイルを選んで開きます。

4. Home.razor ファイルの末尾に <Counter /> 要素を追加して、Counter コンポーネントをページに追加します。

   @page "/"
   
   <h1>Hello, world!</h1>
   
   Welcome to your new app.
   
   <Counter />
   

アプリがまだ稼働中の場合は、ファイルを保存し、ホット リロード (Alt + F10) コマンドを選択します。これにより、Counter コンポーネントがホーム ページに表示されます。 稼働中のアプリで、別のタブを選択し、[ホーム] タブを選択してホーム ページに戻ることで、カウンターが表示されることを確認します。 以前にデバッグを停止した場合は、[デバッグ]>[デバッグの開始] を選択して、再びアプリを開始します。

停止する準備ができたら、Visual Studio に戻り、Shift キーを押しながら F5 キーを押してアプリを停止します。

アプリがまだ実行中である場合は、Visual Studio Code に戻り、Shift+F5 キーを押してアプリを停止します。 ファイルを保存し、[実行]>[デバッグの開始] を選択することでアプリを再度起動します

停止する準備ができたら、Visual Studio Code に戻り、Shift+F5 キーを押してアプリを停止します。

コンポーネントを変更する

コンポーネント パラメーターは、属性または 子コンテンツを使用して指定されます。これにより、子コンポーネントのプロパティを設定できます。 ボタンをクリックするたびに増える数を指定するために、Counter コンポーネントでパラメーターを定義します。

• 属性 [Parameter] を使用して、IncrementAmount のためのパブリック プロパティを追加します。
• currentCount の値を増分するときに IncrementAmount が使用されるように IncrementCount メソッドを変更します。

Counter.razor ファイル内のコードを次のように更新します。

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

次のコードの最後の行で示されているように、Home.razor で、<Counter> 要素を更新して、増分量を 10 に変更する IncrementAmount 属性を追加します。

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

アプリを再度起動します

次の画像で示すように、[クリックしてください] ボタンを選択するたびに、Home コンポーネントは 10 ずつ増える独自のカウンターを持つようになりました。 /counter にある Counter コンポーネント (Counter.razor) は、引き続き 1 ずつインクリメントされます。