Вызов метода в компоненте - PullRequest
Новая
       30

Вызов метода в компоненте

0 голосов
/ 03 ноября 2018

У меня есть этот компонент "Alert": 

@if (Show)
{
    <div class="alert @Class" role="alert">
        @Text
    </div>
}

@functions
{
    [Parameter]
    private bool Show { get; set; } = false;

    [Parameter]
    private string Text { get; set; } = String.Empty;

    [Parameter]
    private string Class { get; set; } = String.Empty; //Success, Warning etc.
}

Однако, когда я вызываю этот компонент на своей странице, мне все еще нужно создать как минимум две переменные - ShowError и ErrorText - для обработки состояния этого предупреждения все еще загромождает мой код, так как это предупреждение существует практически на всех страницах.

Мой вопрос таков: возможно ли снять загромождение кода, вызвав метод ShowMessage в дочернем компоненте?

Примером может быть что-то вроде этого:

Страница 

@page "/my-page"
@inject HttpClient Http


<!-- A lot of HTML code here -->

<Alert/>

<!-- A lot of HTML code here -->


@functions {

    protected override async Task OnInitAsync()
    {
        var response = await Http.PostJsonAsync<Response>("/api/sessions/create", null);
        if (response.StatusCode == HttpStatusCode.OK)
        {

        }
        else
        {
            myAlertComponent.ShowSuccessMessage(response.Message);
        }
    }
}

Компонент «Предупреждение» 

@if (Show)
{
    <div class="alert @Class" role="alert">
    @Text
    </div>
}

@functions
{
    [Parameter]
    private bool Show { get; set; } = false;

    [Parameter]
    private string Text { get; set; } = String.Empty;

    [Parameter]
    private string Class { get; set; } = String.Empty; //Success, Warning, Danger

    public void HideAlerts()
    {
    Show = false;
    }

    public void ShowSuccessMessage(string message)
    {
    Show = true;
    Text = message;
    Class = "success":
    }

    public void ShowErrorMessage(string message)
    {
    Show = true;
    Text = message;
    Class = "danger":
    }
}

1 Ответ

0 голосов
/ 04 ноября 2018

Так осуществляется связь между компонентами в .NET (в данном случае Blazor) ...

Компонент страницы

Определить делегат Action, который инкапсулирует метод с единственным параметром 

     public event Action<string> DisplayAlert;

       protected override async Task OnInitAsync()
       {
            var response = await Http.PostJsonAsync<Response>     ("/api/sessions/create", null);

            if (response.StatusCode == HttpStatusCode.OK)
            {
               // Success should be here, I believe
               NotifyStateChanged(response.Message);
            }
            else
            {

            }
        }

    //Invoke any methods added to the event delegate:



private void NotifyStateChanged(string message) =>  DisplayAlert?.Invoke(message);

И это: назначает ссылку на метод ShowSuccessMessage для экземпляра делегата DisplayAlert, определенного в родительском компоненте. 

<Alert DisplayAlert = "@( str => ShowSuccessMessage(str))/>

<!-- A lot of HTML code here -->

 -------------------------------------------------------------------------------    

"Alert" component
----------------
Define a method whose signature corresponds to that defined by the delegate 




 private static void ShowSuccessMessage(string message)
       {
           Show = true;
           Text = message;
           Class = "success":    
       }

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

...