C# Blazor CascadingParameter

C# Blazor CascadingParameter

 

CascadingParameter 는 상위 컴포넌트 정의된 데이터를 하위 컴포넌트로 전달하는 방법을 제공합니다.

아래처럼 Program.cs 에서 아래처럼 AddCsacadingValue 로 정의하게 되면

builder.Services.AddCascadingValue(sp => new Test { Name = "kei" });
builder.Services.AddCascadingValue("AlphaGroup", sp => new Test { Name = "kei2" });

아래처럼 모든 razor 페이지들이 해당 항목을 모두 받아서 사용할 수 있습니다.

@code {
    [CascadingParameter]
    public Test? Test { get; set; }

    [CascadingParameter(Name = "AlphaGroup")]
    public Test? AlphaGroupTest { get; set; }
}

위 코드에서 볼 수 있듯이 여러 개를 정의하여 사용할 수 있습니다.

 

또한 아래처럼 html 코드 단에서도 사용가능합니다.

상위 컴포넌트에서 아래와 같이 stringDatas 를 CascadingValue 로 정의합니다.

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

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

@code {
    private List<string>? stringDatas = new() { "Item 1", "Item 2" };
}

 

하위 컴포넌트에서는 앞서 알아본 대로 CascadingParameter 를 선언하여 사용하면 됩니다.

<h3>CascadingChild</h3>

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

@code {

    [CascadingParameter]
    protected IEnumerable<string>? ExampleList { get; set; }
}