Exercício – adicionar um componente

Concluído

Neste exercício, você adicionará um componente Razor à página inicial do seu aplicativo.

Adicionar o componente Contador à home page

1. Abra o arquivo Components/Pages/Home.razor.

2. Adicione um componente Counter à página adicionando um elemento <Counter /> no final do arquivo Home.razor.

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

3. Aplique a alteração reiniciando o aplicativo ou usando o recarregamento frequente. O componente Counter aparece na página inicial.

   

Modificar um componente

Defina um parâmetro no componente Counter para especificar o quanto ele incrementa com cada clique de botão.

1. Adicione uma propriedade pública a IncrementAmount com um atributo [Parameter].

2. Altere o método IncrementCount para usar o valor IncrementAmount ao incrementar o valor de currentCount.

   O código atualizado em Counter.razor deve ter esta aparência:

   @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. Em Home.razor, atualize o elemento <Counter /> para adicionar um atributo IncrementAmount que altera o valor de incremento para 10, conforme mostrado pela última linha do seguinte código:

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

4. Aplique as alterações ao aplicativo em execução.

   O componente Home agora tem um contador próprio, que é incrementado em dez cada vez que o botão Clique aqui é selecionado, conforme mostrado na imagem a seguir.

   

   O componente Counter em /counter continua a ser incrementado em um.