[Blazor] CascadingParameter 의 Name 사용

Multi CascadingParameter를 사용하는 경우 타입이 같은 CascadingParameter를 사용할 경우 구분이 필요한데

이때 사용하는게 Name 속성입니다.

아래처럼 CascadingParameter 에 Name을 정의하고 

    [CascadingParameter(Name ="INTVALUE2")]
    protected int IntExample2 { get; set; }

값 전달 시 CascadingValue 의 Name 값을 맞춰주면 해당 Parameter에 매핑됩니다.

   <CascadingValue Value="@intValue2" Name="INTVALUE2">
       <MultiCascadingChild />
   </CascadingValue>

전체코드
CascadingTest.razor

@page "/cascadingtest"
<h3>CascadingTest</h3>

<h3>CascadingParent</h3>
@if (stringData != null)
{
    foreach (string example in stringData)
    {
       <h1>@example</h1>
    }
}

<CascadingValue Value="@stringData">
    <CascadingChild />
</CascadingValue>

<CascadingValue Value="@stringData">
    <CascadingValue Value="@intValue">
        <CascadingValue Value="@intValue2" Name="INTVALUE2">
            <MultiCascadingChild />
        </CascadingValue>
    </CascadingValue>
</CascadingValue>

@code {
    private List<string>? stringData = new() { "Item 1", "Item 2" };
    protected int intValue = 10;
    protected int intValue2 = 20;
}

MultiCascadingChild.razor

<h3>Multi CascadingChild</h3>

@if (ExampleList != null)
{
    foreach (string example in ExampleList)
    {
        <h2>@example</h2>
    }
}
<h2>@IntExample</h2>
<h2>@IntExample2</h2>

@code {

    [CascadingParameter]
    protected IEnumerable<string>? ExampleList { get; set; }
    [CascadingParameter]
    protected int IntExample { get; set; }
    [CascadingParameter(Name ="INTVALUE2")]
    protected int IntExample2 { get; set; }
}

결과

* Name 을 사용하지 않고 같은 타입의 CascadingParameter를 사용하게 되면 모두 0 값으로 처리됩니다.

[Source]
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.MSDocTest

GitHub - kei-soft/Blazor.AppTest