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

Posted 2023-03-27

【中文标题】从 Blazor 中的页面组件调用 MainLayout 中的方法

【英文标题】：Call method in MainLayout from a page component in Blazor

【发布时间】：2020-01-27 02:27:09

【问题描述】：

我有一个带有 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();
    

【问题讨论】：

您不再需要异步 lamda。你可以使用@onclick=btn_clicked

【参考方案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; 

【参考方案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");

【讨论】：

这行得通，而当我调整它以采用参数时，给出的接受答案不起作用。