Это эквивалентное событие испускать Angular / Vue в Blazor?

Question

Это эквивалент выброса события, подобного нижнему в блазоре? : https://angular.io/api/core/EventEmitter (в угловых) https://vuejs.org/v2/guide/components-custom-events.html (inue)

в новом синтаксисе Blazor @ имя события в <> компонента (3.0 превью 6)

Answer 1

Работа:

Index.razor

<SurveyPrompt Title="How is Blazor working for you?" Counter="@Counter" CounterChanged="@CounterChangedFiredEvent" />

<p>Counter: @Counter</p>

@code {
    private int Counter = 1;

    void CounterChangedFiredEvent(int counter)
    {
        Counter = counter;
        StateHasChanged();
    }
}

SuveyPrompt.razor

<input type="button" value="Previuos" @onclick="@Previous" />
<input type="button" value="Next" @onclick="@Next" />

@code {
    // Demonstrates how a parent component can supply parameters
    [Parameter] string Title { get; set; }

    [Parameter]
    private int Counter { get; set; }

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

    void Next()
    {
        CounterChanged(++Counter);
    }

    void Previous()
    {
        CounterChanged(--Counter);
    }
}

Answer 2

Да, это ...

В Blazor события определяются и инициируются с помощью делегатов, в частности делегата Action, Action<T> делегата с одним параметром, двумя, тремя ... 16 параметрами, Func<T>, Func<T, TResult> и более, и важнее всего новая структура EventCallback, EventCallback<T> и т. д. Все эти делегаты инкапсулируют методы, которые имеют количество заданных параметров.

В Angular вы используете что-то подобное для вызова метода:

this.valueChange.emit(this.counter); 

В Blazor вы используете что-то подобное для вызова метода, инкапсулированного в делегате.

Предположим, что вы определяете свойство параметра в дочернем компоненте для инкапсуляции метода, переданного в качестве параметра Component из родительского компонента (это может быть требованием, если вы хотите вызвать метод, определенный в родительском компоненте, и передать ему значение скажем, тип int. Свойство параметра может быть определено так:

protected EventCallback<int> ValueChange {get; set;}

Как назначить делегата свойству параметра в родительском компоненте

<ParentComponent>
   <ChildComponent @onclick="@CallParentMethod" ></ChildComponent>
</ParentComponent>

В дочернем компоненте вы должны определить метод с именем CallParentMethod, из которого он вызывает метод, инкапсулированный в свойстве делегата, таким образом:

Task CallParentMethod()
{
     ValueChange?.InvokeAsync(1);
}

Как видите, InvokeAsync более или менее эквивалентен EventEmitter в Angular.

Обратите внимание, что я мог бы вызывать метод Parent напрямую, используя выражение lambada.

Надеюсь, это поможет ...