在 Blazor 中,重用代码段可以通过以下几种方法实现:
<YourComponent />
的方式引用它。例如,创建一个名为 MyButton.razor
的组件:
<button @onclick="OnClick">@ButtonText</button>
@code {
[Parameter]
public string ButtonText { get; set; }
[Parameter]
public EventCallback OnClick { get; set; }
}
在其它组件中使用:
<MyButton ButtonText="Click me" OnClick="HandleClick" />
@code {
private void HandleClick()
{
Console.WriteLine("Button clicked!");
}
}
.razor.cs
文件,将其定义为部分类。这样,你可以在这个部分类中添加方法和属性,供组件使用。例如,在 MyButton.razor.cs
文件中添加方法:
public partial class MyButton : ComponentBase
{
// ...其他代码...
public void ResetText()
{
ButtonText = "Default";
}
}
例如,创建一个名为 MyViewModel.cs
的视图模型类:
public class MyViewModel : INotifyPropertyChanged
{
private string _buttonText;
public string ButtonText
{
get => _buttonText;
set
{
_buttonText = value;
NotifyPropertyChanged();
}
}
// ...其他代码...
}
在组件中引用视图模型:
@page "/my-component"
@inject MyViewModel ViewModel
<MyButton ButtonText="Click me" OnClick="ViewModel.HandleClick" />
例如,创建一个名为 MyDataService.cs
的服务类:
public class MyDataService
{
public async Task<Data> GetDataAsync()
{
// ...获取数据的代码...
}
}
在 Program.cs
中注册服务:
builder.Services.AddScoped<MyDataService>();
在组件中注入并使用服务:
@inject MyDataService DataService
@code {
private Data myData;
protected override async Task OnInitializedAsync()
{
myData = await DataService.GetDataAsync();
}
}
通过以上方法,你可以在 Blazor 项目中重用代码段,提高代码的可维护性和可重用性。
领取专属 10元无门槛券
手把手带您无忧上云