如何从父级调用组件公共方法

Question

所以我想调用子组件(TimeEntryForm(中的OpenModal((方法。我想我需要访问TimeEntryForm组件的实例，但我不知道如何创建TimeEntryForms的命名实例。

如有任何帮助，我们将不胜感激。

母组件

<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

所以我需要在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:

根据Kirk Woll的建议，删除了timeEntryForm初始化背后的代码。