当URL查询更改时，将炸弹式组件强制为rerender

Question

我阅读的所有内容都指出了我使用NavigationManager.location Changed事件，但是当仅查询字符串更改时，这不会检测到。因此，什么都没有开火。

我已经尝试了建议的内容在这里，这并不是我想要的。

我需要我的组件每次更改当前路由中的查询参数。有人可以这样做吗？

更新：

这是我的代码示例：

@page "/accounts"

@if (Accounts != null)
{
    <table>
        <tbody>
            @foreach (var account in Accounts)
            {
                <tr>
                    <td>
                        <NavLink href="/accounts/?accountId={account.AccountId}">@Account.Name</NavLink>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

@if (Account != null)
{
    <div>
        <h2>@Account.Name</h2>
    </div>
}

@implements IDisposable
@inject NavigationManger NavManager
@inject AccountService AccountService

@code {
    protected Guid Id { get; set; } = Guid.NewGid();
    protected Guid AccountId { get; set; } = Guid.Empty;
    protected List<AccountModel> Accounts { get; set; }
    protected AccountModel Account { get; set; }

    protected override void OnInitialized()
    {
        NavManager.LocationChanged += LocationChanged;
    }

    protected async override Task OnParametersSetAsync()
    {
        if (AccountId != Guid.Empty)
        {
            Account = await AccountService.GetAsync(AccountId);
        }
        else
        {
            Accounts = await AccountService.GetAllAsync();
        }
    
        StateHasChanged();
    }

    void LocationChanged(object sender, LocationChangedEventArgs e)
    {
        Id = Guid.NewGuid();
    
        StateHasChanged();
    }
    
    void IDisposable.Dispose()
    {
        NavManager.LocationChanged -= LocationChanged;
    }
}

此处的问题是location changed（对象，位置changedeventargs）在仅在查询参数更改时不会发射。这很有意义，路由是相同的/accounts。

从基础上讲，我有一个页面显示帐户列表并查看一个帐户。我希望路由为/Account当查看列表和'/Accounts？accountiD = someaccountid'时，我是在查看一个路线时。使用标准的NAVLink组件不会触发组件的启用者，并且位置改变事件也不会触发。甚至没有设置新的ID值。查看stateHaschanged仅在值更改时才能重新读取组件。

Answer 1

我最终得到了这样的工作，就像这样的工作：

@page "/accounts"

@if (Accounts != null)
{
    <table>
        <tbody>
            @foreach (var account in Accounts)
            {
                <tr>
                    <td>
                        <NavLink href="/accounts/?accountId={account.AccountId}">@Account.Name</NavLink>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

@if (Account != null)
{
    <div>
        <h2>@Account.Name</h2>
    </div>
}

@implements IDisposable
@inject NavigationManger NavManager
@inject AccountService AccountService

@code {
    protected Guid Id { get; set; } = Guid.NewGid();
    protected Guid AccountId { get; set; } = Guid.Empty;
    protected List<AccountModel> Accounts { get; set; }
    protected AccountModel Account { get; set; }

    protected override void OnInitialized()
    {
        NavManager.LocationChanged += LocationChanged;
    }

    protected async override Task OnParametersSetAsync()
    {
        if (AccountId != Guid.Empty)
        {
            Account = await AccountService.GetAsync(AccountId);
        }
        else
        {
            Accounts = await AccountService.GetAllAsync();
        }
    
        StateHasChanged();
    }

    async void LocationChanged(object sender, LocationChangedEventArgs e)
    {
        if (AccountId != Guid.Empty)
        {
            Account = await AccountService.GetAsync(AccountId);
        }
        else
        {
            Accounts = await AccountService.GetAllAsync();
        }
    
        StateHasChanged();
    }
    
    void IDisposable.Dispose()
    {
        NavManager.LocationChanged -= LocationChanged;
    }
}

我最终只调用了我想手动在第一个渲染上运行的所有代码。我希望（错误地假设）我可以告诉它，通过更改一个本地属性，然后调用statehashaschanged，可以自动从顶部重新读成分生命周期。

现在，当我在“/account”和“/account？enackid = someid” 的“/accode>”之间切换时。

Answer 2

我在WASM应用程序中这样做，可以很好地

将其设置在您要接收路由参数的页面上，

@page "/pagename/{text?}"

<div>@Text</div>

然后

@code {
    [Parameter]
    public string? Text { get; set; }

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
    protected override void OnParametersSet()
    {
        Text = Text  ?? "Name Not Supplied";
    }
}

将重新渲染任何数据更改，AFAIK您不能强迫组件重新渲染而不重新渲染它，只有更改的订户，这是有道理的，因为重新汇款很昂贵。

Answer 3

您可以将stateHaschanged（）绑定到更改查询字符串的函数/逻辑，从而重新渲染组件。