Cvičení – přidání komponenty

Dokončeno

V tomto cvičení přidáte komponentu Razor na domovskou stránku aplikace.

Přidání komponenty Counter na domovskou stránku

1. Otevřete soubor Components/Pages/Home.razor.

2. Přidejte komponentu Counter na stránku přidáním <Counter /> elementu na konec Home.razor souboru.

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

3. Změnu použijte restartováním aplikace nebo opětovným načtením za provozu. Komponenta Counter se zobrazí na domovské stránce.

   

Úprava komponenty

Definujte parametr komponenty Counter , který určuje, kolik se zvýší každým kliknutím na tlačítko.

1. Přidejte veřejnou vlastnost pro IncrementAmount [Parameter] atribut.

2. Změňte metodu IncrementCount tak, aby používala IncrementAmount hodnotu při zvýšení hodnoty currentCount.

   Aktualizovaný kód v Counter.razor by měl vypadat takto:

   @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. Aktualizujte Home.razor<Counter /> prvek tak, aby přidal IncrementAmount atribut, který změní přírůstek na 10, jak je znázorněno posledním řádkem v následujícím kódu:

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

4. Použijte změny ve spuštěné aplikaci.

   Komponenta Home má nyní svůj vlastní čítač, který se zvýší o 10 pokaždé, když je vybráno tlačítko Kliknout na mě , jak je znázorněno na následujícím obrázku.

   

   Komponenta Counter /counter se stále navyšuje o jednu.