Blazor:如何动态更改URL

Question

我有一个页面，它使用字符串bookingReference作为其路由参数Booking/{bookingReference}。

此页面是父组件，其中包含一个子组件，用于管理预订详细信息。当预订详细信息更新时，子组件会回叫父组件。

@page "/Booking/{bookingReference}"

<div class="header">
<h1> @Booking.BookingReference </h1>
</div>
<div>
<BookingDetails Booking="Booking" OnUpdateBooking="UpdateBooking" />
</div>

@code {
[Parameter]
public string BookingReference { get; set; }    
private Booking Booking { get; set; }
void UpdateBooking(Booking booking)
{
Booking = booking;
StateHasChanged();
}
}

BookingDetails组件如下所示：

<EditForm Model="FormState" OnValidSubmit="@saveChanges">
//inputs etc.
</EditForm>
@code {
[Parameter]
public Booking Booking { get; set; }
[Parameter]
public EventCallback<Booking> OnUpdateBooking { get; set; }
private async Task saveChanges()
{
// update booking object
Booking.BookingReference = FormState.BookingReference;
try
{
Booking = await BookingService.UpdateBooking(Booking);
await OnUpdateBooking.InvokeAsync(Booking);
Toaster.Success("Booking updated successfully");
}
catch
{
Toaster.Error("Failed to update booking");
}
}
}

用户可以从子组件更新预订参考，从而更改页面的标题——这很好，一切都很好。

然而，我也想将URL更改为更新后的bookingReference——有什么方法可以在不强制刷新的情况下实现这一点吗？

Answer 1

好的，现在更改url中BookingReference值的唯一方法是使用新的BookingReference导航到当前url。请注意，此操作不是重新加载或刷新页面组件。这相当于一个重新渲染的动作。OnInitialized生命周期只执行一次，这表示组件没有被销毁，然后重新创建。它们只是被重新渲染。这就是要走的路。

@code {
[Parameter]
public string BookingReference { get; set; }    
private Booking Booking { get; set; }
void UpdateBooking(Booking booking)
{
Booking = booking;
NavigationManager.NavigateTo($"/{Booking.BookingReference}");
}
}

Answer 2

如果"强制刷新"是指重新加载页面，那么答案是肯定的。您不必重新加载页面，但必须重新渲染页面才能刷新视图(不是重新加载，而是重新渲染(。重新加载页面时，会重新创建页面组件和嵌入组件。当您重新呈现页面时，页面组件和嵌入组件不会被破坏，并且只应用Html diff来反映这一点。

你没有发布BookingDetails组件的代码，所以我在这里的回答只是基于猜测

<BookingDetails Booking="Booking" OnUpdateBooking="UpdateBooking" />

Your BookingDetails component should define a property named OnUpdateBooking
of type *EventCallback<Booking>* like this:

[Parameter]
public EventCallback<Booking> OnUpdateBooking {get; set;}

它还应该定义一个名为Booking的参数属性，它是从父组件传递的对象。

// Supporting variable
private Booking booking;
[Parameter]
public Booking Booking 
{ 
get => booking; 
set 
{
if( booking != value)
{
booking = value;
OnUpdateBooking.InvokeAsync(value);
} 
}

注意：Booking属性存储从父组件传递的值。当它的值因子组件中的代码而更改时，您应该调用OnUpdateBooking"delegate"，将最新更新的值传递给它。该值会传递回父组件中定义的UpdateBooking方法，将传递的值分配给私有Booking字段，然后重新呈现父页面。现在你应该看到url的变化来反映这一点。

注意：从UpdateBooking中删除对StateHasChanged方法的调用。没有必要。