Blazor-一个组件应该对另一个组件的方法做出反应

Question

我正在使用https://github.com/jsakamoto/Toolbelt.Blazor.I18nText快速翻译HTML中的文本，只要我写一个像<p>@MyText.Example</p>这样的标签，它就可以很好地工作。但如果我尝试对Lists(在我的FooterLayout.razor中看到(做同样的事情，那就有点不同了。当我更改NaviHeaderBar中的值时，列表必须在FooterLayout中更改。

我的MainLayout.rarzor看起来像这样：

<div class="grid grid-cols-1" style="width: 100%;">
<div class="grid-c-1 grid-r-1">
<NaviHeaderBar />
</div>
<div class="grid-c-1 grid-r-1">
<LoginDisplay />
</div>

<div class="grid-c-1 grid-r-1">
@Body
</div>
<div class="grid-c-1 grid-r-1">
<FooterLayout />
</div>
</div>

在我的NaviHeaderBar.rarzor中，我有一个标签：

<select id="selectMenuItem" style="background-color: transparent; font-size: 16px; border: none; font-weight: bolder; color: grey;" 
@onchange="OnChangeCurrentLang">
<option value="en" selected="@(CurrentLang == "en")">English</option>
<option value="de" selected="@(CurrentLang == "de")">Deutsch</option>
</select>

使用此代码

@code
{
private string CurrentLang;
I18nText.NaviHeaderBarLanguage MyText = new I18nText.NaviHeaderBarLanguage();
protected override async Task OnInitializedAsync()
{
MyText = await I18nText.GetTextTableAsync<I18nText.NaviHeaderBarLanguage>(this);
}
private async Task OnChangeCurrentLang(ChangeEventArgs args)
{
CurrentLang = args.Value as string;
await I18nText.SetCurrentLanguageAsync(CurrentLang);
}
}

我的页脚布局.rarzor看起来像这样：

@foreach (LinkInput link in linkListInput)
{
<a href=@link.linkURl style="height: 30px; line-height: 20px;">
<li class="list-item">@link.text</li>
</a>
}
</ul>
</div>

使用此代码：

@code{
public List<LinkInput> linkListInput = new List<LinkInput>(){
new LinkInput("text1", "/url1/"),
new LinkInput("text2", "/url1/"),
new LinkInput("text3", "/url1/"),
new LinkInput("text4", "/url1/"),
new LinkInput("text5", "/url1/")
};
I18nText.FooterLayoutLanguage MyText = new I18nText.FooterLayoutLanguage();
protected override async Task OnInitializedAsync()
{
MyText = await I18nText.GetTextTableAsync<I18nText.FooterLayoutLanguage>(this);
}
}

我想把new LinkInput("text1", "/url1/"),改成new LinkInput(MyText.Example, "/url1/"),，但这行不通。我的错误消息：A field initializer cannot reference the non-static field, method, or property 'FooterLayout.MyText'。

为了修复这个错误，我这样做了：

protected override async Task OnInitializedAsync()
{
MyText = await I18nText.GetTextTableAsync<I18nText.FooterLayoutLanguage>(this);
linkListInput.Clear();
linkListInput.Add(new LinkInput(MyText.Example, "/url1"));
linkListInput.Add(new LinkInput(MyText.Example, "/url1"));
linkListInput.Add(new LinkInput(MyText.Example, "/url1"));
linkListInput.Add(new LinkInput(MyText.Example, "/url1"));
linkListInput.Add(new LinkInput(MyText.Example, "/url1"));
StateHasChanged();
}

现在，当我更改语言设置时，FooterLayout.razor不会更改它的文本。我可以让它改变它的文本，例如@onmouseover。但这意味着我必须悬停在我的FooterLayout上。

当我在NaviHeaderBar中更改语言设置时，有没有办法更改它的文本？我该怎么做？

Answer 1

您需要某种状态管理(如Fluxor(或某种消息系统。

public class MessagingSystem
{
public event EventHandler<EventArgs> LanguageChanged;
public void NotifyLanguageChanged()
{
LanguageChanged?.Invoke(this, EventArgs.Empty);
}
}

然后，您可以将其注入头中，并在选择新语言时调用NotifyLanguageChanged。

在页脚中，您可以注入它，然后订阅LanguageChanged，在这种情况下调用InvokeAsync(StateHasChanged);。

不过，请记住，如果您使用标准。NET事件，那么您必须在组件上实现IDisposable，这样您也可以取消订阅，否则服务将永远保留对组件的引用，并且不会被垃圾收集。

就我个人而言，我只会使用Fluxor：(