[Microsoft] 3. 機能コンポーネントを作成する - Angularチュートリアル Tour of Heroes を Blazor で再実装する

機能コンポーネントを作成する

作成したHeroesコンポーネントを、一覧部分と詳細部分に分けます。

---

HeroDetailコンポーネントを作成する

dotnet cliで作成します。

dotnet new razorcomponent --output BlazorTourOfHeroes/Shared --name HeroDetail

テンプレート部分を作成する

HeroDetailコンポーネントのテンプレート部分を作成します。

Shared/HeroDetail.razor

@if (Hero != null)
{
    <h2>@Hero.Name.ToUpper() Details</h2>
    <div><span>Id: </span>@Hero.Id</div>
    <div>
    <label>Name:
        <input @bind="Hero.Name" placeholder="name"/>
    </label>
    </div>
}

[Parameter]アノテーションをつける

外部からHeroオブジェクトを受け取るために、[Parameter]アノテーションをつけたHeroプロパティを作成します。

Shared/HeroDetail.razor

    [Parameter]
    public Hero Hero { get; set; }

HeroDetailコンポーネントを表示する

Heroesコンポーネントにある詳細表示部分をHeroDetailコンポーネントに置き換えます。

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

詳細表示部分をHeroDetailコンポーネントに置き換えます。

Shared/Heroes.razor

<HeroDetail Hero="selectedHero"></HeroDetail>

テンプレート全体はこのようになります。

Shared/Heroes.razor

<h2>My Heroes</h2>
<ul class="heroes">
    @foreach (var hero in heroes)
    {
        <li @onclick="@(_ => OnSelect(hero))"
            class="@(selectedHero == hero ? "selected" : "")"
            ><span class="badge">@hero.Id</span> @hero.Name
        </li>    
    }
</ul>

<HeroDetail Hero="selectedHero"></HeroDetail>

なにが変わった？

一覧表示をHeroesコンポーネント、詳細表示をHeroDetailコンポーネントとして分けたことで、メンテナンス性が良くなりました。

こんなんできました

Shared/Heroes.razor

@using BlazorTourOfHeroes.Model

<h2>My Heroes</h2>
<ul class="heroes">
    @foreach (var hero in heroes)
    {
        <li @onclick="@(_ => OnSelect(hero))"
            class="@(selectedHero == hero ? "selected" : "")"
            ><span class="badge">@hero.Id</span> @hero.Name
        </li>    
    }
</ul>

<HeroDetail Hero="selectedHero"></HeroDetail>

@code {
    private List<Hero> heroes = MockHeroes.Create();
    private Hero selectedHero = null;

    private void OnSelect(Hero hero)
    {
        selectedHero = hero;
    }
}

Shared/HeroDetail.razor

@using BlazorTourOfHeroes.Model

@if (Hero != null)
{
    <h2>@Hero.Name.ToUpper() Details</h2>
    <div><span>Id: </span>@Hero.Id</div>
    <div>
    <label>Name:
        <input @bind="Hero.Name" placeholder="name"/>
    </label>
    </div>
}

@code {
    [Parameter]
    public Hero Hero { get; set; }
}