如何在Blazer中加载不可路由的组件
如何在Blazer中加载不可路由的组件
提问于 2022-03-15 16:09:57
我在一个项目中使用Blazer作为前端，Cosmos DB在后端。我正在循环遍历一个项目列表，并有一个按钮/锚标记，OnClick接收一个参数。目前，我正在使用查询字符串参数将用户从一个页面重定向到另一个页面。但是，我不想使用查询字符串。我想使组件不可路由，并按一下按钮加载它。是否有一种方法可以在按钮单击并加载不可路由组件时传递参数？非常感谢您的解释，我正在使用.net 5，这里我将编写一个示例代码，这样您就可以提供帮助了。我的项目使用Azure Cosmos DB和Blazor Server。
<!-- 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(){}
}回答 1
Stack Overflow用户
发布于 2022-03-15 17:54:21
因为这是概念性的--您没有提供代码上下文--这应该提供一个很好的起点，并演示基本概念。评论它有多好/不合身！
我已经指出了“路由”组件，但是它可以与任何组件一起工作。
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71485429
复制相关文章
相似问题
腾讯云开发者
