如何在Blazer中加载不可路由组件

Question

我在一个项目中使用Blazer作为前端，使用Cosmos DB作为后端。我正在循环浏览一个项目列表，并有一个按钮/锚标记，OnClick会接收一个参数。目前，我正在使用查询字符串参数将用户从一个页面重定向到另一个页面。但是，我不想使用查询字符串。我想使组件不可路由，并在单击按钮时加载它。有没有办法在点击按钮时传递参数并加载不可路由的组件？非常感谢你的解释，我正在使用.net 5。在这里，我将编写一个示例代码，以便您提供帮助。我的项目使用Azure Cosmos数据库和Blazor服务器。

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
///////////////////////////
MoviesListComponent.razor
////////////////////////
@page "/movies"
foreach(movie in ListOfMovies){
<div> movie.ReleaseeDate</div>
<div> movie.Country</div>
<div> movie.Title</div>
<button type="button" @onClick="()=>LoadAnotherComponent(movie.title)"> on button click redirect to(or load) a non-routable compnent and send movie.title as parameter for example MovieTitleAnalysis component</button>  
}
@code{
public List<Movie> ListOfMovies {get;set;}
}

on button click inside MoviesListComponent load 
MovieTitleAnalysis.razor and pass the parameter. Dispose MovieListComponent



///////////////////////
MovieTitleAnalysis.razor is a non routable component
//////////////////
<div>welcome to movie Title analysis</div>

@code{
[paramter]
public string movieTitle {get;set;}

void PreformSomeOpration(){}
}

Answer 1

由于这是概念性的-您没有提供任何代码上下文-这应该提供一个很好的起点并演示基本概念。评论它的合身程度！

我已经指出了"；"路由"；组件，但它可以与任何组件配合使用。

DynamicPage.razor

@if (ComponentType != null)
{
<DynamicComponent Parameters=this.Parameters Type=this.ComponentType />
}
else
{
@this.ChildContent
}
@code {
[Parameter] public Type? ComponentType { get; set; }
[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter] public IDictionary<string, object>? Parameters { get; set; }
}

和Index.razor

@page "/"
@*Example Menu*@
<div class="p-2 m-2">
<button class="btn btn-primary" @onclick="() => this.ChangePage(null)">Change to Index</button>
<button class="btn btn-secondary" @onclick="() => this.ChangePage(typeof(Counter))">Change to Counter</button>
<button class="btn btn-info" @onclick="() => this.ChangePage(typeof(FetchData))">Change to FetchData</button>
</div>
<DynamicPage ComponentType=this.page>
<PageTitle>Index</PageTitle>
<div>Hello World from Blazor</div>
</DynamicPage>
@code {
private Type? page = null;
private void ChangePage(Type? newPage)
=> this.page = newPage;
}