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

Question

我有一个带有MainLayout页面的 Blazor 应用程序，它@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");