Blog

Blazor의 매개변수를 사용하여 부모 구성 요소에서 자식 구성 요소로 데이터를 전달하는 방법에 대해 설명합니다 

Show Footer 체크박스를 체크하면 Card Footer가 표시되어야 하고 체크 해제 시에는 카드 바닥글이 숨겨져야 합니다.

이 페이지에는 2개의 blazor 구성 요소가 있습니다.

1. EmployeeList Component(상위 구성 요소)
2. DisplayEmployee Component(하위 구성 요소)

자식 구성 요소 클래스(DisplayEmployeeBase.cs)

• 이 클래스에는 2개의 속성(Employee 및 ShowFooter)만 있습니다.
• 둘 다 Parameter 속성으로 decorated 되어 있습니다.
• 이 속성을 사용하면 부모 구성 요소에서 값을 전달할 수 있습니다.

using EmployeeManagement.Models;
using Microsoft.AspNetCore.Components;

namespace EmployeeManagement.Web.Pages
{
    public class DisplayEmployeeBase : ComponentBase
    {
        [Parameter]
        public Employee Employee { get; set; }

        [Parameter]
        public bool ShowFooter { get; set; }
    }
}

Child Component View (DisplayEmployee.razor)

• 이 component 에는 @page 지시문이 없습니다 . 이 component 는 하위 구성 요소로만 사용할 것이기 때문에 의도적으로 생략했습니다. 우리는 이것이 라우팅 가능한 구성 요소가 되는 것을 원하지 않습니다. 즉, 브라우저에서 URL을 사용하여 이 component 에 접근할 수 있기를 원하지 않습니다.
• 이 구성 요소는 Employee 속성에 바인딩되어 직원 세부 정보를 표시합니다. 또한 ShowFooter bool 속성을 사용하여 바닥글을 표시하거나 숨깁니다.
• 이 두 속성(Employee 및 ShowFooter)의 값은 상위 구성 요소(EmployeeList 구성 요소)에 의해 전달됩니다.

@inherits DisplayEmployeeBase

<div class="card m-3" style="min-width: 18rem; max-width:30.5%;">
    <div class="card-header">
        <h3>@Employee.FirstName @Employee.LastName</h3>
    </div>
    <img class="card-img-top imageThumbnail" src="@Employee.PhotoPath" />
    @if (ShowFooter)
    {
        <div class="card-footer text-center">
            <a href="@($"employeedetails/{Employee.EmployeeId}")" 
               class="btn btn-primary m-1">View</a>

            <a href="#" class="btn btn-primary m-1">Edit</a>

            <a href="#" class="btn btn-danger m-1">Delete</a>
        </div>
    }
</div>

Parent Component Class (EmployeeListBase.cs)

• 이 상위 구성 요소(EmployeeList)의 주요 책임은 REST API를 호출하여 직원 목록을 검색하는 것입니다.
• ShowFooter 부울 속성 도 있습니다 . 보기의 바닥글 표시 확인란은 이 속성에 바인딩됩니다.

using EmployeeManagement.Models;
using EmployeeManagement.Web.Services;
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace EmployeeManagement.Web.Pages
{
    public class EmployeeListBase : ComponentBase
    {
        [Inject]
        public IEmployeeService EmployeeService { get; set; }

        public IEnumerable<Employee> Employees { get; set; }

        public bool ShowFooter { get; set; } = true;

        protected override async Task OnInitializedAsync()
        {
            Employees = (await EmployeeService.GetEmployees()).ToList();
        }
    }
}

Parent Component View (EmployeeList.razor)

• 이 부모 구성 요소는 직원 목록을 반복하면서 Employee 속성을 사용하여 직원 개체를 자식 구성 요소에 전달합니다.
• ShowFooter 값 도 상위 구성 요소에서 하위 구성 요소로 전달됩니다.
• 이 두 속성(Employee 및 ShowFooter)은 자식 구성 요소의 [Parameter] 속성 으로 decorate 됩니다 . 이렇게 하면 부모 구성 요소가 이 두 속성에 값을 전달할 수 있습니다.

@page "/"
@inherits EmployeeListBase

<h3>Employee List</h3>

<input type="checkbox" id="showFooter" @bind="ShowFooter" />
<label for="showFooter">Show Footer</label>

@if (Employees == null)
{
    <div class="spinner"></div>
}
else
{
    <div class="card-deck">
        @foreach (var employee in Employees)
        {
            <DisplayEmployee Employee="employee" ShowFooter="ShowFooter">
            </DisplayEmployee>
        }
    </div>
}