Övning – Lägga till en komponent

Slutförd

I den här övningen lägger du till en Razor-komponent på appens startsida.

Lägg till räknarkomponenten på startsidan

1. Öppna filen Components/Pages/Home.razor.

2. Lägg till en Counter komponent på sidan genom att lägga till ett <Counter />-element i slutet av Home.razor-filen.

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

3. Tillämpa ändringen genom att starta om appen eller använda omladdning i realtid. Komponenten Counter visas på startsidan.

   

Ändra en komponent

Definiera en parameter på komponenten Counter för att ange hur mycket den ökar med varje knappklick.

1. Lägg till en offentlig egenskap för IncrementAmount med ett [Parameter]-attribut.

2. Ändra IncrementCount-metoden så att IncrementAmount-värdet används när värdet för currentCountökas.

   Den uppdaterade koden i Counter.razor bör se ut så här:

   @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. I Home.razoruppdaterar du elementet <Counter /> för att lägga till ett IncrementAmount-attribut som ändrar inkrementsbeloppet till 10, enligt den sista raden i följande kod:

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

4. Tillämpa ändringarna på appen som körs.

   Komponenten Home har nu en egen räknare som ökar med 10 varje gång Klicka på mig knappen är markerad, enligt följande bild.

   

   Komponenten Counter på /counter fortsätter att öka med en.