如何在 Renderfragment 中傳遞函數

Question

我想對兩種不同的模式使用以下 Renderfragment。 單擊 BackIcon 時，我想傳遞兩個參數：標題和函數。 我怎樣才能同時傳遞函數OnVisiblityChanged ？

@{
    RenderFragment <string> BackIconTitle = heading =>@<Template>
        <div class="title-with-icon">
            <div class="back-icon" @onclick="() =>OnVisiblityChanged()">
                 <ArrowLeftIcon Height="1.5rem" Width="1.5rem"/>
            </div>
            <div class="back-icon-title">@heading</div>
        </div>
    </Template>;
}

<Modal 
    Visible="@isVisible"
    TitleTemplate="@BackIconTitle(Loc["Some Heading"])" 
    Footer="@BackIconFooter"
    DestroyOnClose="true"
    OnCancel="@OnVisiblityChanged"
    Width="@("1000px")">
    <DeliveryTimeContent IsModalView="true"/>
</Modal>



private void OnVisiblityChanged()
{
  if (isVisible)
  {
    isVisible= false;
  }
  else
  {
     isVisble= true;
  }

  StateHasChanged();
}

先感謝您！

Answer 1

我已經采用了您的代碼並創建了一個非常簡單的頁面和組件來演示我認為您正在嘗試做的事情。

組件.razor

Modal 只是另一個組件。

@if(Visible)
{
    @ContentTemplate
}
@code {
    [Parameter] public RenderFragment? ContentTemplate { get; set; }
    [Parameter] public bool Visible { get; set; }
}

然后是主頁。

您將該方法作為 Func 傳遞。 您需要精確定義。 我的函數模式符合標准的@onclick事件模式： Task EventMethod(MouseEventArgs e)

@page "/"

<PageTitle>Index</PageTitle>

<Component Visible="@isVisible1" ContentTemplate="@BackIconTitle("Heading1", OnVisiblity1Changed)" />

<Component Visible="@isVisible2" ContentTemplate="@BackIconTitle("Heading 2", OnVisiblity2Changed)" />

<div class="p-2 m-2">
    <button class="btn btn-primary" @onclick=OnVisiblity1Changed>
        Show/Hide 1
    </button>
    <button class="btn btn-info" @onclick=OnVisiblity2Changed>
        Show/Hide 2
    </button>
</div>

@code {
    private bool isVisible1;
    private bool isVisible2;

    RenderFragment BackIconTitle(string heading, Func<MouseEventArgs, Task> close ) => (__builder) =>
    {
        <div class="bg-dark text-white p-2 m-1 text-end">
            <button class="btn btn-primary" @onclick=close >Hide</button>
        </div>
    };


    private Task OnVisiblity1Changed(MouseEventArgs e)
    {
        isVisible1 = !isVisible1;
        return Task.CompletedTask;
    }

    private Task OnVisiblity2Changed(MouseEventArgs e)
    {
        isVisible2 = !isVisible2;
        return Task.CompletedTask;
    }
}

Answer 2

創建自定義組件並使用調用 OnVisibilityChanged 方法的事件處理程序。