当这个剃须刀组件从其他剃须刀组件放置在MainLayout中时，如何显示放置在剃须刀组件中的对话框

Question

我正在尝试显示一个放置在LogoutModal.rarzor中的SfDialog。这个LogoutModal作为组件放置在MainLayout中，我想从我的NavMenu:中显示这个对话框

NavMenu.razor:

[CascadingParameter]
MainLayout mainLayout { get; set; }
//Logout
private void OnBtnClick()
{
this.mainLayout.ShowDialog();
}

MainLayout.razor:

@inherits LayoutComponentBase
<CascadingValue Value="this">
<NavMenu />
</CascadingValue>
<div>
<div class="container-fluid py-3">
@Body
</div>
</div>
<LogoutModal />>

LogOutModal.rar:

@inject NavigationManager NavigationManager
@inherits LayoutComponentBase 
<!-- Logout Dialog -->
<SfDialog @ref="DialogObj" @bind-Visible="@IsVisible" ID="defaultDialog" Width="350px" 
Target="#formId" ShowCloseIcon="true" IsModal="true" ZIndex="300000">
<DialogEvents Created="@oncreated"></DialogEvents>
<DialogTemplates>
<Content> Are you sure you want to sign out?</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton OnClick="@CloseDialog">
<DialogButtonModel Content="Sign Out" IsPrimary="true"></DialogButtonModel>
</DialogButton>
<DialogButton OnClick="@CloseDialog">
<DialogButtonModel Content="Cancel"></DialogButtonModel>
</DialogButton>
</DialogButtons>

@code{
[Inject]
IJSRuntime JsRuntime { get; set; }
SfDialog DialogObj;
private bool IsVisible { get; set; } = false;
private void CloseDialog()
{
this.IsVisible = false;
}
public void ShowDialog()
{
this.DialogObj.Show();
}
public void oncreated()
{
JsRuntime.InvokeAsync<string>("Dialog.onCreated");
}
}

有人知道怎么做吗？

提前感谢

Answer 1

您需要调用对话框渲染页面来显示对话框。

MainLayout.razor:

@code{ 
//Show logout dialog
LogoutModal logoutModal;
public void ShowLogoutDialog()
{
logoutModal.ShowDialog();
}
}

谨致问候，Indrajith