在组件中调用方法

Question

我有这个“提示”组件：

@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":
    }
}

- Westerlund.io

Answer 1

要调用组件方法，请尝试使用@ref添加对组件的引用，然后在@code块中添加组件声明。如果组件中的方法是公共的，则可以在组件范围之外使用它们。

Parent.razor

<Alert @ref="Alert" Text="I am showing" /> @*Notice the @ref tag;*@
<button @onclick="() => ShowAlert(true)">Show Success</button>
<button @onclick="() => ShowAlert(false)">Show Failure</button>
<button @onclick="HideAlert">Hide</button>

@code {
    private Alert Alert { get; set; } // This is where the @ref is bound; no need to initialize, the markup does that for you.

    private void ShowAlert(bool success)
    {
        if (success) Alert.ShowSuccessMessage("Success!!");
        else Alert.ShowErrorMessage("Failed :(");
    }
    private void HideAlert() => Alert.Hide();
}

Alert.razor

@if (_show)
{
    <div class="alert alert-@_class" role="alert">
        <strong>@Text</strong>
    </div>
}

@code
{
    [Parameter] public string Text { get; set; } = string.Empty; // set as "I am showing", but will be updated if a message is passed to the show methods below

    private bool _show { get; set; }
    private string _class { get; set; } = string.Empty;

    public void Hide() { _show = false; StateHasChanged(); }

    public void ShowSuccessMessage(string message? = null)
    {
        _show = true;
        Text = message ?? Text ?? string.Empty;
        _class = "success";
        StateHasChanged(); // StateHasChanged() informs the parent component that the child has updated and to update the dom
    }

    public void ShowErrorMessage(string? message = null)
    {
        _show = true;
        Text = message ?? Text ?? string.Empty;
        _class = "danger";
        StateHasChanged();
    }
}

请参阅章节：捕获组件的引用

- srosy