翻译自：Study Blazor .NET，转载请注明。

依赖注入

在blazor中每一个组件使用 @inject 指令实现依赖注入（DI）。

可以像下面示例那样，在blazor组件中使用类似于 MVC 应用程序中的 Startup.cs > ConfigureService 方法来实现注入依赖。这些服务的生命周期和 MVC 应用程序类似，例如 Singleton ,Transient 和 Scoped，这里我们使用的是已经存在的ASP.Net 生态系统。

// In Startup.cs
public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton();
}

//DiComponent.razor
@page '/dependency-inject'
@using Services
@inject IDataAccess DataObject

@if (Students != null)
{
    Total Student: @Students.Count.ToString();
}

@functions {
    private List Students;
    protected override async Task OnInitAsync()
    {
        Students = await DataObject.GetStudentData();
    }
}

消费 REST API Service

下面blazor提供的模板程序中，在 FetchData 组件里使用 HttpClient 系统类，组件可以使用 @inject 注入并进一步扩展访问 REST API Service。

//FetchData.razor
@page "/fetchdata"
@inject HttpClient Http

Weather forecast
This component demonstrates fetching data from the server.

@if (forecasts == null)
{
    
Loading...
}
else
{
    
            @foreach (var forecast in forecasts)
            {
                
            }
        

        

            

                
Date
                
Temp. (C)
                
Temp. (F)
                
Summary
            
        
        

                    
@forecast.Date.ToShortDateString()
                    
@forecast.TemperatureC
                    
@forecast.TemperatureF
                    
@forecast.Summary
                
    
}

@functions {
    WeatherForecast[] forecasts;
    protected override async Task OnInitAsync()
    {
        forecasts = await Http.GetJsonAsync("sample-data/weather.json");
    }
    class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF { get; set; }
        public string Summary { get; set; }
    }
}