razor-pages - 从 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;
    }
}

接下来，确保您将此事件回调级联到您的 body 。

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

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

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