Как вызвать компонент public метод от его родителя?

Question

Итак, я хочу вызвать метод OpenModal () в дочернем компоненте (TimeEntryForm). Я думаю, мне нужно получить доступ к экземпляру компонента TimeEntryForm, но я не знаю, как создать именованный экземпляр TimeEntryForm.

Любая помощь будет оценена.

Родительский компонент

<button type="button" onclick="@TimeEntryForm.OpenModal()" class="btn btn-info btn-lg">
    <span class="glyphicon glyphicon-plus"></span> Add
</>

<TimeEntryForm></TimeEntryForm>

Дочерний компонент TimeEntry

@using Chopper.Shared
@using DatabaseModel.Models
@page "/timeentryform"
@inject HttpClient HTTP
@inherits TimeEntryFormModel

@if (IsOpened)
{
    <div class="modal" role="dialog" tabindex="-1" style="display: block;">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add a Time Entry</h5>
                </div>
                <div class="modal-body">

                    <form>
                        <div class="form-group">
                            <label for="Job" class="col-form-label">Job:</label>
                            <input type="text" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label for="Employee" class="col-form-label">Employee:</label>
                            <input class="form-control" type="text" />
                        </div>
                        <div class="form-group">
                            <label for="Hours" class="col-form-label">Hours:</label>
                            <input class="form-control" type="text" />
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclickAsync="@OnAddTimeEntry()">Add Entry</button>
                    <button type="button" class="btn btn-primary" onclick="@CloseModal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop show"></div>
}

Код дочернего компонента ввода времени за моделью вида

using Chopper.Client.TimeEntries.Services;
using DatabaseModel.Models;
using Microsoft.AspNetCore.Blazor.Components;
using System.Threading.Tasks;

namespace Chopper.Client.TimeEntries
{
    public class TimeEntryFormModel : BlazorComponent
    {
        protected TimeEntry TimeEntry = new TimeEntry();

        [Inject]
        private TimeEntriesServices _client { get; set; }

        protected bool IsOpened { get; set; }

        public void OpenModal()
        {
            IsOpened = true;
            StateHasChanged();
        }

        //[Parameter]
        protected void CloseModal()
        {
            IsOpened = false;
            StateHasChanged();
        }

        protected async Task OnAddTimeEntry()
        {

            if (TimeEntry.Job != null && TimeEntry.Category != null && TimeEntry.TimeSpentHours > 0 && TimeEntry.Employee != null)
            {
                await _client.CreateTimeEntry(TimeEntry);
                await OnInitAsync();
                StateHasChanged();
                //return true;
            }
            //return false;
        }

    }
}

Answer 1

т, Пожалуйста, выполните следующие действия: 1. Определите в родительском компоненте делегат события, целью которого является сообщить дочернему элементу компонент для открытия модального окна: public event Action OnOpenModal; 2. Определите в родительском компоненте метод, который вызывает делегат события private void OpenMe() => OnOpenModal?.Invoke(); 3. Этот метод вызывается, когда пользователь нажимает кнопку, определенную в родительском компоненте: Примечание: не используйте скобки после OpenMe <button type="button" onclick="@OpenMe" class="btn btn-info btn-lg"> <span class="glyphicon glyphicon-plus"></span> Add </> 4. Добавьте свойство MyModal в элемент Child Component со значением делегата события. <TimeEntryForm MyModal = "@OnOpenModal"></TimeEntryForm>

 Define a property of Action delegate to store the event delegate passed to the Child Component




[Parameter] protected Action MyModal { get; set; }


    protected override void OnInit()
    {
        // Attach the OpenModal method defined in the Child // Component to the delegate
        MyModal += OpenModal;
    }

 Now, whenever the user hit the button the OpenModal is called and the modal window 
 is displayed. 

public void OpenModal()


 {
            IsOpened = true;
            StateHasChanged();
     }

Answer 2

Поэтому мне нужно было добавить защищенный член в модель родительского компонента protected TimeEntryForm timeEntryForm = new TimeEntryForm();

, а затем сделать ссылку на него в представлении как <TimeEntryForm ref="timeEntryForm"></TimeEntryForm>

Родительский компонент

<button type="button" onclick="@timeEntryForm.OpenModal()" class="btn btn-info btn-lg">
    <span class="glyphicon glyphicon-plus"></span> Add
</>

<TimeEntryForm ref="timeEntryForm"></TimeEntryForm>

Код родительского компонента за моделью / моделью представления

public class TimeEntriesGridModel : BlazorComponent
{
    [Inject]
    private TimeEntriesServices _client { get; set; }

    protected TimeEntryForm timeEntryForm; // = new TimeEntryForm(); //Per Kirk Woll's suggestion

    protected List<TimeEntry> Model { get; set; }

    protected override async Task OnInitAsync()
    {
        Model = await _client.GetAllTimeEntries();
    }


}

Дочерний компонент TimeEntry

@using Chopper.Shared
@using DatabaseModel.Models
@page "/timeentryform"
@inject HttpClient HTTP
@inherits TimeEntryFormModel

@if (IsOpened)
{
    <div class="modal" role="dialog" tabindex="-1" style="display: block;">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add a Time Entry</h5>
                </div>
                <div class="modal-body">

                    <form>
                        <div class="form-group">
                            <label for="Job" class="col-form-label">Job:</label>
                            <input type="text" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label for="Employee" class="col-form-label">Employee:</label>
                            <input class="form-control" type="text" />
                        </div>
                        <div class="form-group">
                            <label for="Hours" class="col-form-label">Hours:</label>
                            <input class="form-control" type="text" />
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclickAsync="@OnAddTimeEntry()">Add Entry</button>
                    <button type="button" class="btn btn-primary" onclick="@CloseModal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop show"></div>
}

Код дочернего компонента ввода времени за моделью вида

using Chopper.Client.TimeEntries.Services;
using DatabaseModel.Models;
using Microsoft.AspNetCore.Blazor.Components;
using System.Threading.Tasks;

namespace Chopper.Client.TimeEntries
{
    public class TimeEntryFormModel : BlazorComponent
    {
        protected TimeEntry TimeEntry = new TimeEntry();

        [Inject]
        private TimeEntriesServices _client { get; set; }

        protected bool IsOpened { get; set; }

        public void OpenModal()
        {
            IsOpened = true;
            StateHasChanged();
        }

        //[Parameter]
        protected void CloseModal()
        {
            IsOpened = false;
            StateHasChanged();
        }

        protected async Task OnAddTimeEntry()
        {

            if (TimeEntry.Job != null && TimeEntry.Category != null && TimeEntry.TimeSpentHours > 0 && TimeEntry.Employee != null)
            {
                await _client.CreateTimeEntry(TimeEntry);
                await OnInitAsync();
                StateHasChanged();
                //return true;
            }
            //return false;
        }

    }
}

EIA:

Удален код инициализации для timeEntryForm по предложению Кирка Уолла.