Создайте свое первое веб-приложение с ASP.NET Core с помощью Blazor

Windows Linux macOS

Изменить компонент

Параметры компонента задаются с помощью атрибутов или дочернего содержимого, что позволяет устанавливать свойства дочернего компонента. Определите параметр компонента Counter и укажите, насколько его показатель увеличивается при каждом нажатии кнопки:

  • Добавьте общедоступное свойство для IncrementAmount с атрибутом [Parameter].
  • Измените метод IncrementCount, чтобы использовать IncrementAmount при увеличении значения currentCount.

Следующий код показывает, как этого добиться. Выделенные строки показывают изменения.

Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

В Home.razor обновите элемент <Counter>, чтобы добавить атрибут IncrementAmount, который изменяет величину приращения на десять, как показано выделенной строкой в следующем коде:

Components/Pages/Home.razor
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Примените изменения к приложению, щелкнув кнопку горячей перезагрузки XAML. Компонент Home теперь содержит собственный счетчик, показатель которого увеличивается на десять каждый раз при выборе кнопки Щелкни меня, как показано на следующем рисунке. Показатель компонента Counter (Counter.razor) в /counter продолжает увеличиваться на единицу.

Компонент Home теперь содержит собственный счетчик, показатель которого увеличивается на десять каждый раз при выборе кнопки Щелкни меня, как показано на следующем рисунке. Показатель компонента Counter (Counter.razor) в /counter продолжает увеличиваться на единицу.

Домашняя страница теперь содержит счетчик, который увеличивается на 10, показывая счетчик на 40.

Продолжить