如何从Razor页面调用Blazor组件中的函数

Question

我正在为Blazor创建一个基于EasyMDE的MarkdownEditor组件。GitHub上的项目与文件上传分开工作，因为我找不到从页面在组件中运行函数的方法。

我用同样的代码解释，因为我不知道如何更好地解释。这是Razor页面中MarkdownEditor的基本代码。我映射了一些事件，例如ImageUploadChanged

<MarkdownEditor Value="@markdownValue" ValueChanged="@OnMarkdownValueChanged"
ImageUploadEndpoint="https://localhost:7013/api/Image"
ImageUploadChanged="@OnImageUploadChanged"
ImageUploadStarted="@OnImageUploadStarted"
ImageUploadProgressed="@OnImageUploadProgressed"
ImageUploadEnded="@OnImageUploadEnded" />
async Task OnImageUploadChanged(FileChangedEventArgs e)
{
// e contains the image to upload via API
// at the end I want to execute ImageUploadEnded
}

在MarkdownEditor中，用户可以上传图像。将图像放置在编辑器上时，会从组件中激发事件ImageUploadChanged。

UI必须通过API将文件上传到某个位置。我想向用户展示上传的进度。因此，我必须调用MarkdownEditor中的一个函数来向用户更新特定文件的状态。

类似地，当上传完成时，我必须通知MarkdownEditor图像的URL。因此，它在文本中添加了经典字符串。为此，我必须执行对JavaScript的调用，并传递一些只有组件知道的参数，例如ElementId。

如果我添加一个@ref="@ElementRef"，我就无法从组件访问公共函数。此外，我不想从组件中调用JavaScript，因为我认为它不是很优雅。

基本上，我想调用markdownEditor.js(这里是代码(中的函数notifyImageUploadSuccess

function notifyImageUploadSuccess(elementId, imageUrl) {
const instance = _instances[elementId];
if (instance) {
return instance.imageUploadNotifier.onSuccess(imageUrl);
}
}

UI只知道imageUrl，因此我必须将imageUrl传递给组件，然后组件必须调用JavaScript函数。

我找不到路了。也许这很简单。

Answer 1

在Upload.razor更新[MarkdownEditor]中，如下所示：

<MarkdownEditor@ref＝"；markdownEditor"；AutoSaveEnabled="；真"；AutoSaveId＝"；UploadPage"；值="@markdownValue"；ValueChanged="@OnMarkdownValueChanged"；ValueHTMLChanged="@OnMarkdownValueHTMLChanged"；ImageUploadEndpoint＝"；https://localhost:7013/api/files"ImageUploadChanged="@OnImageUploadChanged"；ImageUploadStarted="@OnImageUploadStarted"；ImageUploadProgressed＝"@OnImageUploadProgressed"；ImageUploadEnded＝"@OnImageUploadEnded"；UploadImage＝"；真"/>

在同一页代码中添加：

MarkdownEditor markdownEditor { get; set; }

在同一页代码中，更新此方法，如下代码：

async Task OnImageUploadChanged(FileChangedEventArgs e)
{
if (e.Files.Length > 0)
await markdownEditor.NotifyImageUpload(e.Files[0]);
this.StateHasChanged();
}