Blazor：使用級聯參數傳遞值的問題

Question

我有兩個 blazor 組件第一個組件調用一個方法

 <CascadingValue Value="this">
@ChildContent
</CascadingValue>

@code{ 


[Parameter] public RenderFragment? ChildContent { get; set; }
public Debtor? CurrentDebtor { get; private set; }

public async Task<Debtor> ConsolitdateCurrentDebtor(int debtorID)
{
    Debtor? currentDebtor = null;

    if (DebtorStoreList != null && DebtorStoreList.Count > 0)
    {
        currentDebtor = DebtorStoreList.Where(d => d.ID == debtorID).Single();
    }
    else
    {
        currentDebtor = await _debtorService.GetDebtorInformation();
    }

    CurrentDebtor = currentDebtor;
   // StateHasChanged();  unless called no update takes place
    return currentDebtor;
  }
 }

現在我在這個 AppState 類中有一個名為 CurrentDebtor 的屬性。 一個 blazor 組件來調用此方法並設置 Current Debtor。

從另一個組件，我正在做類似的事情

@code {
Debtor? debtor;

[CascadingParameter]
AppState AppState{ get; set; }

protected override async Task OnInitializedAsync()
 {
    debtor = AppState.CurrentDebtor;
 }
}

但是 CurrentDebtor 即將為空，它不為空的唯一方法是調用 StateHasChanged() 。 有沒有強迫它調用 Statehaschanged 來正確填充它？

Answer 1

嘗試使用級聯參數和雙向綁定將多個組件“連接”在一起並不總是最好的方法，尤其是頁面中的子組件到子組件（您似乎正在嘗試從顯示的信息中執行此操作在問題中）。

有一種使用標准事件模型的替代方法。

我的Debtor類別

public class Debtor
{
    public Guid Id { get; set; }    
    public string? Name { get; set; }
}

債務人查看服務：

public class DebtorViewService
{
    public Debtor Record { get; private set; } = default!;

    public event EventHandler<Debtor>? DebtorChanged;

    public DebtorViewService()
    {
        // Get and assign the Debtor Store DI service
    }

    public async ValueTask GetCurrentDebtor(Guid debtor)
    {
        // Emulate getting the Debtor from the Debtor Service
        await Task.Delay(1000);
        this.Record = new Debtor() { Name=$"Fred {DateTime.Now.ToLongTimeString()}", Id = Guid.NewGuid()};
        this.DebtorChanged?.Invoke(this, this.Record); 
    }
}

在這樣的服務中注冊：

builder.Services.AddScoped<DebtorViewService>();

獲取債務人的組件：

GetDebtor.razor

@inject DebtorViewService Service

<div class="m-2 p-3 bg-dark text-white">
    <h5>GetDebtor Component</h5>
    <div>
        <button class="btn btn-secondary" @onclick=this.GetCurrentDebtor>Get Debtor</button>
    </div>
</div>
@code {
    private async Task GetCurrentDebtor()
        => await Service.GetCurrentDebtor(Guid.Empty);
}

顯示債務人的組件：

ShowDebtor.razor

@inject DebtorViewService Service
@implements IDisposable

<div class="m-2 p-3 bg-info">
    <h5>ShowDebtor Component</h5>
    @if (this.Service.Record is not null)
    {
        <div>
            Id : @this.Service.Record.Id
        </div>
        <div>
            Name : @this.Service.Record.Name
        </div>
    }
</div>

@code {
    protected override void OnInitialized()
        => this.Service.DebtorChanged += this.OnDebtorChanged;

    private void OnDebtorChanged(object? sender, Debtor value)
    => this.InvokeAsync(this.StateHasChanged);

    public void Dispose()
        => this.Service.DebtorChanged -= this.OnDebtorChanged;
}

還有一個演示頁面：

@page "/"
<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<GetDebtor />

<ShowDebtor />

<SurveyPrompt Title="How is Blazor working for you?" />

@code{
}

數據和更改事件現在位於每個人都可以訪問的單個共享（作用域）DI 服務實例中。

您應該能夠基於此代碼構建組件。