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 na stránku komponentu Counter přidáním prvku <Counter /> na konec souboru Home.razor.

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

3. Proveďte změnu restartováním aplikace nebo rychlým načtením. Komponenta Counter se zobrazí na domovské stránce.

   

Úprava komponenty

Definujte parametr v komponentě Counter, abyste určili, kolik inkrementuje při každém kliknutí na tlačítko.

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

2. Změňte metodu IncrementCount tak, aby při zvýšení hodnoty IncrementAmountpoužila hodnotu 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. V Home.razoraktualizujte prvek <Counter /> přidáním atributu IncrementAmount, který změní hodnotu přírůstku na 10, jak ukazuje poslední řádek 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í vlastní čítač, který se zvýší o 10 při každém výběru tlačítka Click me, jak je znázorněno na následujícím obrázku.

   

   Komponenta Counter v /counter pokračuje v zvyšování o jednu.