Blazor - 一個組件應該對另一個組件的方法做出反應

Question

我正在使用這個https://github.com/jsakamoto/Toolbelt.Blazor.I18nText來快速翻譯我的 HTML 中的文本，只要我寫一個像<p>@MyText.Example</p>這樣的標簽它就可以正常工作. 但是，如果我嘗試對Lists （在我的FooterLayout.razor看到）做同樣的事情，那就有點不同了。 該列表必須在改變FooterLayout當我改變我的一個值NaviHeaderBar 。

我的MainLayout.razor看起來像這樣：

<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.razor我有這個標簽：

                <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);
    }
}

我的FooterLayout.razor看起來像這樣：

                @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 :)