API 호출 후 하위 구성 요소에서 Blazor 기본 Razor 페이지를 새로 고치는 방법은 무엇입니까?

Blazor 하위 구성 요소 API 호출이 완료된 후 기본 .Razor 페이지를 트리거/새로 고침

Blazor에서는 기본 페이지 레이아웃을 동적으로 업데이트하거나 중첩된 하위 구성 요소에서 트리거된 이벤트나 작업(예: API 호출 완료)을 기반으로 콘텐츠를 새로 고쳐야 하는 상황에 자주 직면합니다.

실제 사례

다음 시나리오를 고려해보세요.

• 여러 필터 구성 요소(예: SearchResults.razor)가 포함된 기본 검색 페이지가 있습니다.
• 사용자가 필터를 적용하면 API 엔드포인트를 호출하여 수정된 데이터를 가져옵니다.
• API 호출이 완료된 후 SearchResults.razor 페이지에서 업데이트된 데이터를 표시하고 로딩 스피너를 숨기려고 합니다.

솔루션

위의 솔루션을 달성하기 위해 우리는 다음 기술을 활용합니다.

1. 상태 저장 서비스 구현

우리는 검색된 API 데이터를 루트 페이지와 해당 하위 구성 요소 모두에서 액세스할 수 있도록 범위가 지정된 서비스(예: AppState)를 사용하여 저장하고 공유합니다.

2. "로딩" 구성요소 생성

페이지가 로드될 때 스피너를 표시하고 데이터가 준비되면 콘텐츠를 표시하는 재사용 가능한 Loading.razor 구성 요소를 정의합니다.

3. 보기 서비스를 이용하세요

데이터를 관리하고 기본 데이터가 변경되면 실행되는 ListChanged 이벤트를 노출하는 보기 서비스(예: WeatherForecastViewService)를 만듭니다.

4. 하위 구성요소를 뷰 서비스에 바인딩

하위 구성 요소에서는 뷰 서비스를 삽입하고 ListChanged 이벤트를 모니터링합니다. 변경 사항이 감지되면 StateHasChanged를 사용하여 구성 요소를 새로 고치고 업데이트된 데이터를 표시합니다.

5. 루트 페이지에서 상태를 중앙에서 관리하세요

기본 SearchResults.razor 페이지에서는 다음을 수행합니다.

• Loading 구성 요소를 AppState에 바인딩하여 데이터 가용성에 따라 스피너를 표시하거나 숨깁니다.
• 종속성 주입을 사용하여 뷰 서비스를 주입합니다.
• 비동기적으로 데이터를 가져오고 AppState를 업데이트합니다.
• 뷰 서비스의 ListChanged 이벤트를 수신하고 StateHasChanged를 호출하여 UI 업데이트를 트리거합니다.

코드 조각(SearchResults.razor)

<code class="language-csharp">@code {
    [Inject] WeatherForecastViewService viewService { get; set; }

    // API 调用完成后赋值为 true
    public bool IsLoaded { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GetForecastsAsync();
        this.viewService.ListChanged += this.OnListChanged;
    }

    private async Task GetForecastsAsync()
    {
        // 代码省略，为简洁起见
    }

    private void OnListChanged(object sender, EventArgs e)
        => this.InvokeAsync(this.StateHasChanged);

    public void Dispose()
    {
        this.viewService.ListChanged -= this.OnListChanged;
    }
}</code>

코드 조각(Loading.razor)

<code class="language-csharp">@if (this.IsLoaded)
{
    @this.ChildContent
}
else
{
    // 显示加载微调器
}</code>

이러한 기술을 구현함으로써 하위 구성 요소와 기본 페이지 간의 통신 채널을 설정하여 UI 업데이트를 트리거하고 상위-하위 관계 전반에 걸쳐 일관된 데이터 상태를 유지할 수 있습니다.

위 내용은 API 호출 후 하위 구성 요소에서 Blazor 기본 Razor 페이지를 새로 고치는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!