Ćwiczenie — dodawanie składnika

W tym ćwiczeniu dodasz składnik Razor do strony głównej aplikacji.

Dodawanie składnika Counter do strony głównej

1. Otwórz plik Components/Pages/Home.razor .

2. Dodaj składnik Counter do strony, dodając element <Counter /> na końcu pliku Home.razor.

   @page "/"
   
   <PageTitle>Home</PageTitle>
   
   <h1>Hello, world!</h1>
   
   Welcome to your new app.
   
   <Counter />
   

3. Zastosuj zmianę, uruchamiając ponownie aplikację lub używając przeładowywania na gorąco. Składnik Counter jest wyświetlany na stronie głównej.

   

Modyfikowanie składnika

Zdefiniuj parametr w składniku Counter, aby określić, o ile zwiększa się przy każdym kliknięciu przycisku.

1. Dodaj właściwość publiczną dla IncrementAmount z atrybutem [Parameter].

2. Zmień metodę IncrementCount, aby użyć wartości IncrementAmount podczas zwiększania wartości currentCount.

   Zaktualizowany kod w pliku Counter.razor powinien wyglądać następująco:

   @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;
       }
   }
   

3. W Home.razorzaktualizuj element <Counter />, aby dodać atrybut IncrementAmount, który zmienia przyrost na 10, jak pokazano w ostatnim wierszu w następującym kodzie:

   @page "/"
   
   <h1>Hello, world!</h1>
   
   Welcome to your new app.
   
   <Counter IncrementAmount="10" />
   

4. Zastosuj zmiany do uruchomionej aplikacji.

   Składnik Home ma teraz własny licznik, który zwiększa się o 10 za każdym razem, gdy jest zaznaczony przycisk Kliknij mnie , jak pokazano na poniższej ilustracji.

   

   Składnik Counter w /counter nadal zwiększa się o jeden.