Упражнение. Добавление компонента

  • 4 мин

В этом упражнении вы добавите компонент Razor на домашнюю страницу приложения.

Добавьте компонент счётчика на домашнюю страницу

  1. Разверните папки в Обозревателе решений Visual Studio. Если у вас не отображен Обозреватель решений, выберите Вид>Обозреватель решений.

  2. Выберите компоненты или страницы , чтобы просмотреть существующие страницы Razor.

  3. Выберите файл Home.razor, чтобы открыть его.

  4. Добавьте компонент Counter на страницу, добавив элемент <Counter /> в конце файла Home.razor.

    @page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Если приложение по-прежнему запущено, сохраните файл и выберите команду "Горячая перезагрузка " (ALT+F10), чтобы Counter компонент отображалась на домашней странице. В работающем приложении убедитесь, что счетчик отображается, выбрав другую вкладку, а затем выберите вкладку "Главная ", чтобы вернуться на домашнюю страницу. Если вы остановили отладку ранее, запустите приложение еще раз, выбрав Отладка>Начать отладку.

Когда вы будете готовы остановиться, вернитесь в Visual Studio и нажмите клавиши SHIFT+F5 , чтобы остановить приложение.

  1. Разверните папки в проводнике Visual Studio Code. Если обозреватель не отображается, выберите Вид>Explorer.

  2. Выберите компоненты или страницы , чтобы просмотреть существующие страницы Razor.

  3. Выберите файл Home.razor, чтобы открыть его.

  4. Добавьте компонент Counter на страницу, путем добавления элемента <Counter /> в конце файла Home.razor.

    @page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Если приложение по-прежнему запущено, вернитесь в Visual Studio Code и нажмите клавиши SHIFT+F5 , чтобы остановить приложение. Сохраните файл и запустите приложение еще раз, нажав кнопку "Запустить отладку>".

Когда вы будете готовы остановиться, вернитесь в Visual Studio Code и нажмите клавиши SHIFT+F5 , чтобы остановить приложение.

Снимок экрана: компонент счетчика на домашней странице.

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

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

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

Обновите код в файле Counter.razor следующим образом:

@page "/counter"

<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, который изменяет значение приращения на 10, как показано в последней строке в следующем фрагменте кода:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Снова запустите приложение

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

Снимок экрана: домашняя страница с обновленным счетчиком.