我读过"Blazor中组件之间通信的3种方法"一文,并尝试过这样做。我在@body下有消息组件,根据@body组件中的用户操作,消息必须更改
@inject ClientMessage clientMessage
@inherits LayoutComponentBase
@using Site.Shared.Components
<div class="sidebar">
<AdminMenu />
</div>
<div class="main">
<div class="content px-4">
@Body
</div>
<Message/>
</div>
@code
{
protected async Task ChangeState()
{
await InvokeAsync(StateHasChanged);
}
protected override void OnInitialized()
{
clientMessage.MsgChange += ChangeState;
}
}
消息组件:
@inject ClientMessage clientMessage
<div style="@(IsVisble ? "display:block" : "display:none")" class="@MsgClass" role="alert">
@if (clientMessage != null)
{
@clientMessage.Message
}
</div>
@code {
public bool IsVisble
{
get
{
if (string.IsNullOrEmpty(@clientMessage.Message))
{
return false;
}
return true;
}
}
public string MsgClass
{
get
{
if (clientMessage == null)
{
return string.Empty;
}
string msgClass;
switch (clientMessage.MsgType)
{
case EMsgType.Info:
msgClass = "alert alert-info";
break;
case EMsgType.Success:
msgClass = "alert alert-success";
break;
case EMsgType.Warning:
msgClass = "alert alert-warning";
break;
case EMsgType.Error:
msgClass = "alert alert-danger";
break;
case EMsgType.NoMsg:
default:
msgClass = string.Empty;
break;
}
return msgClass;
}
}
}
消息类
public class ClientMessage
{
public event Func<Task> MsgChange;
public ClientMessage(string msg, EMsgType msgType)
{
this.Message = msg;
this.MsgType = msgType;
NotifyStateChanged();
}
public void SetMsg(string msg, EMsgType msgType)
{
this.Message = msg;
this.MsgType = msgType;
NotifyStateChanged();
}
public string Message { get; set; }
public EMsgType MsgType { get; set; }
private void NotifyStateChanged()
{
if (MsgChange != null)
{
MsgChange.Invoke();
}
}
}
ClientMessage类由DI作为单例注入。如果我在@body-components中调用SetMsg(newMsgm,msgType(,那么ChangeState((方法就会被调用,但什么都没有发生,我的意思是组件不会被重新呈现。如果我改为"InvokeAsync"使用"Invoke",则会出现错误"当前线程未与Dispatcher关联。在触发呈现或组件状态时,使用InvokeAsync.((将执行切换到Dispatcher。"。如果我重新加载页面,则可以看到消息。
我做错了什么?如何强制重新呈现消息组件?
我解决了这个问题。也许这会对某人有所帮助。
当@body在NavigationManager之后被更改时,我本地化了这个问题。NavigateTo("some_page"(已被调用StateHasChanged((不会重新呈现消息组件。我尝试了不同的地方,在那里我可以激发StateHasChanged((,如果我把它移到Message.razor,它就会按预期工作。
一开始阅读文档比阅读文章要好:(