Übung: Hinzufügen einer Komponente

Abgeschlossen

In dieser Übung fügen Sie der Startseite Ihrer Anwendung eine Razor-Komponente hinzu.

Hinzufügen der Komponente „Counter“ zur Startseite

1. Öffnen Sie die Datei "Components/Pages/Home.razor ".

2. Fügen Sie der Seite eine Counter-Komponente hinzu, indem Sie am Ende der Home.razor-Datei ein <Counter />-Element hinzufügen.

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

3. Wenden Sie die Änderung an, indem Sie die App neu starten oder hot reload verwenden. Die Counter Komponente wird auf der Startseite angezeigt.

   

Ändern einer Komponente

Definieren Sie einen Parameter für die Counter Counter-Komponente, um anzugeben, um wie viel der Zähler bei jedem Klick auf die Schaltfläche erhöht werden soll.

1. Fügen Sie eine öffentliche Eigenschaft für IncrementAmount mit einem [Parameter]-Attribut hinzu.

2. Ändern Sie die IncrementCount-Methode so, dass IncrementAmount verwendet wird, wenn der Wert von currentCount erhöht wird.

   Der aktualisierte Code in Counter.razor sollte wie folgt aussehen:

   @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. Aktualisieren Sie in Home.razor das Element <Counter />, um ein Attribut IncrementAmount hinzuzufügen, das den Inkrementbetrag, wie in der letzten Zeile im folgenden Code gezeigt, in 10 ändert:

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

4. Wenden Sie die Änderungen auf die ausgeführte App an.

   Die Home-Komponente verfügt nun über einen eigenen Zähler, der wie in der folgenden Abbildung gezeigt jedes Mal um den Wert 10 erhöht wird, wenn auf die Schaltfläche Hier klicken geklickt wird.

   

   Die Counter Komponente erhöht /counter sich weiterhin um eine Komponente.