Вызов метода в MainLayout из компонента страницы в Blazor - PullRequest
Новая
       53

Вызов метода в MainLayout из компонента страницы в Blazor

0 голосов
/ 26 сентября 2019

У меня есть приложение 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();
    }
}

1 Ответ

1 голос
/ 27 сентября 2019

Вы можете сделать это с помощью комбинации каскадных значений и 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; }
...