Question

我有一个Blazor应用程序，该应用程序的页面为MainLayout，其中有一个@Body用于加载实际的页面内容。

在我的情况下，Index.razor已加载到MainLayout页面内。

是否有一种方法可以从位于父页面中的子页面（Index.razor）中调用方法； MainLayout.razor？

示例：

MainLayout.razor

<div class="content">
<ul class="menu">
  <li>menu item 1</li>
</ul>

@Body

</div>

@code
{
    public async Task Test()
    {
        await JsRuntime.InvokeAsync<object>("console.log", "test parent");
    }
}

Index.razor

<h1>This is the index page</h1>
<button @onclick="(async () => await btn_clicked())">Call parent method</button>

@code
{
    // Call method in MainLayout
    public async Task btn_clicked()
    {
        await parent.Test();
    }
}

Answer 1

您可以结合使用级联值和EventCallback来执行此操作。

首先，为您的Test创建一个事件回调。这样做，在您的MainLayout.razor中添加以下代码。

EventCallback btn_clicked => EventCallback.Factory.Create(this, Test);

或者，要确保只创建一次该对象，可以使用以下命令：

EventCallback _btn_clicked = EventCallback.Empty;
EventCallback btn_clicked  {
    get {
        if (_btn_clicked.Equals(EventCallback.Empty))
            _btn_clicked = EventCallback.Factory.Create(this, Test);
        return _btn_clicked;
    }
}

接下来，请确保将此事件回调回调到您的身体上。

<CascadingValue Value=btn_clicked >
    @Body
</CascadingValue>

现在，在您的Index.razor代码中，设置属性：

[CascadingParameter]
public EventCallback btn_clicked { get; set; }

Answer 2

谢谢。第一个答案正是我需要的，尽管我需要传递一个参数，所以它与布局相同，除了：

在MainLayout.razor中：

public EventCallback<string> EventName => EventCallback.Factory.Create<string>(this, MethodName);

在Index.razor中：

[CascadingParameter]
protected EventCallback<string> EventName { get; set; }

调用方法：

EventName.InvokeAsync("Name");

从Blazor中的页面组件调用MainLayout中的方法

2 个答案: