Question

我正在修改[Blazor技巧和窍门] [1]中的blazor示例

[1]：https://www.youtube.com/watch?v=3duXMxwnkXI从17分钟标记开始。

如果在Visual Studio中创建名为BlazorCounter的新 Blazor App ，然后将生成的Counter.razor修改为如下所示：

@page "/counter"
@inject Data.CounterState State

<h1>Counter</h1>

<p>Current count: @State.CurrentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {

    void IncrementCount()
    {
        State.CurrentCount++;
    }
}

然后将以下c＃类添加到Data文件夹中 namespace BlazorCounter.Data { public class CounterState { public int CurrentCount { get; set; } } } 最后，在Startup类的ConfigureServices方法的末尾添加以下行：

            services.AddScoped<CounterState>();

然后您将拥有一个计数器，该计数器会保留其状态，并且不会在每次导航到“计数器”页面时都从零开始。

我的问题是：如何将其转换为“隐藏代码”并分隔C＃代码？我已经将其他剃须刀页面转换为“隐藏代码”，但看不到如何处理@inject行。

Answer 1

创建一个基类，并使用 [InjectAttribute] 注入服务：

public class MyCounterComponent : ComponentBase
{

    [Inject]
    public virtual CounterState State { get; set; }

    protected void IncrementCount()
    {
        State.CurrentCount++;
    }
}

我还将您的IncrementCount()方法从视图文件移动到此类文件。

现在您可以将其与@inherits指令一起使用：

@page "/counter"
@inherits BlazorApp1.Pages.MyCounterComponent

<h1>Counter</h1>

<p>Current count: @State.CurrentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

有关更多详细信息，请参见Request a service in a component和Use DI in services

如何将带有注入的剃须刀页面转换为隐藏代码？

1 个答案: