Передача метода в компонент - PullRequest
Новая
       33

Передача метода в компонент

1 голос
/ 01 июля 2019

Я пытался выяснить, как, если это возможно, и как передать метод с главной страницы в компонент в Blazor.

У меня есть простая страница бритвы, которая содержит компонент с кнопкой,Я хочу передать метод onclick со страницы бритвы кнопке в компоненте

Примечание: мне не нужен этот метод для возврата чего-либо void, это хорошо.Мне просто нужно иметь возможность вызывать метод с главной страницы в кнопке на компоненте.Я добавил здесь только как предположение, так как он жаловался на T

Page 

@page "/test"
@using Testing.Client.Model;
@using System.Threading;

<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>

@code {

    public Action<int> btnClick(){ return 1;}

}

Модель для компонента 

public class TestingMethodPassingModel : ComponentBase
{
    [Parameter]
    protected Action<int> ExternalMethod { get; set; }
}

component 

@inherits TestingMethodPassingModel;
@using testing.Client.Model;
@using System.Threading;


<button class="btn btn-primary" @onclick="@ExternalMethod" autofocus>External button</button>


@code {


    }

Ошибки

Приведенный выше код дает мне следующую ошибку

Не дает перегрузки для 'btnClick' соответствует делегату 'Действие'

Я пыталсятакже выполнить тип T, и это не удалось, так как Blazor по какой-то причине не может найти ссылку для типа T

Примечание по обновлению

Рабочий пример, объединенный из ответов. PassingMethodToComponent

Ответы [ 3 ]

3 голосов
/ 01 июля 2019

Вот пример передачи метода от родителя к потомку, и потомок, вызывающий его. Поскольку вам не требуется возвращаемое значение, я просто использую Action вместо Action<T>.

Есть много способов сделать этот код более компактным, но я остановился на более подробном примере, который, мы надеемся, покажет, что происходит немного лучше.

Родительский компонент: 

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Child ParentMethod="@SayHello" />

@code {

    private void SayHello()
    {
        Console.WriteLine("Hello!");
    }

}

дочерний компонент: 

<h3>Child</h3>

<button @onclick="@InvokeParentMethod">Click Me!</button>

@code {

[Parameter] private Action ParentMethod { get; set; }

private void InvokeParentMethod()
{
    ParentMethod?.Invoke();
}

}
2 голосов
/ 01 июля 2019

Это потому, что событие Click btnClick не относится к типу Action<int>, а на самом деле EventCallback<TIn>.Так что измените, вам нужно изменить несколько вещей вокруг.

измените ExternalMethod на 

[Parameter]
protected EventCallback<int> ExternalMethod {get; set;}

и измените btnClick на 

public void btnClick(int param) { /* code */ }
// and then set the razor to
<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>

// Or do it with a lambda in the razor

<TestMethodPassing ExternalMethod="@((param) => {/* code */ })"></TestMethodPassing>

Существует проблема GitHubотслеживание новой обработки событий и привязки здесь

0 голосов
/ 01 июля 2019

Это должно работать:

Страница: 

<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>
<label>@something</label>

@code {

    string something = "1";

    void btnClick()
    {
        something = "11";
    }
}

TestingMethodPassingModel: 

[Parameter]
protected Action ExternalMethod { get; set; }

Компонент: 

<button class="btn btn-primary" @onclick="@ExternalMethod" autofocus>External button</button>

Для вашего примера (с Action<int>):

Страница: 

<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>

@code {

    void btnClick(int arg)
    {

    }
}

TestingMethodPassingModel: 

[Parameter]
protected Action<int> ExternalMethod { get; set; }

Компонент: 

<button class="btn btn-primary" @onclick="@ClickHandler" autofocus>External button</button>

@code {
    void ClickHandler()
    {
        ExternalMethod.Invoke(10);
    }
}
...