Hoe de uitvoerdecorateur in hoekig te gebruiken

In Angular kan een webpagina veel verschillende herbruikbare componenten bevatten. Elke component bevat meestal zijn eigen TypeScript-logica, HTML-sjabloon en CSS-stijl.

U kunt ook componenten in andere componenten hergebruiken. In dit geval kunt u de uitvoerdecorator gebruiken om informatie van een onderliggende component terug te sturen naar de bovenliggende component.

U kunt ook de uitvoerdecorator gebruiken om te luisteren naar gebeurtenissen die plaatsvinden in de onderliggende component.

De Output Decorator toevoegen aan een onderliggende component

Eerst moet u een nieuwe Angular-app maken met een bovenliggende component en een onderliggende component.

Als u eenmaal een bovenliggend en onderliggend onderdeel hebt, kunt u de uitvoerdecorator gebruiken om gegevens over te dragen en te luisteren naar gebeurtenissen tussen de twee componenten.

1. Maak een nieuwe aan Hoekige toepassing. Standaard is "app" de naam van de hoofdcomponent. Deze component bevat drie hoofdbestanden: "app.component.html", "app.component.css" en "app.component.ts".
2. Voor dit voorbeeld fungeert de component "app" als de bovenliggende component. Vervang alle inhoud in "app.component.html" door het volgende:

   <divklas="oudercomponent">
   <h1> Dit is de bovenliggende component h1>
   div>

3. Voeg wat styling toe aan de bovenliggende app-component in "app.component.css":

   .parent-component {
   font-familie: Ariaal, Helvetica, schreefloos;
   Achtergrond kleur: lichtkoraal;
   opvulling: 20px
   }

4. Gebruik de opdracht "ng genereer component" om maak een nieuwe hoekcomponent "gegevenscomponent" genoemd. In dit voorbeeld vertegenwoordigt "data-component" de onderliggende component.

   ng g c gegevenscomponent

5. Voeg inhoud toe aan de onderliggende component in "data-component.component.html". Vervang de huidige inhoud om een ​​nieuwe knop toe te voegen. Bind de knop aan een functie die wordt uitgevoerd wanneer de gebruiker erop klikt:

   <divklas="kind-component">
   <P> Dit is de kindcomponent P>
   <knop (Klik)="opKnopKlik()">Klik hierknop>
   div>

6. Voeg wat styling toe aan de onderliggende component in "data-component.component.css":

   .child-component {
   font-familie: Ariaal, Helvetica, schreefloos;
   Achtergrond kleur: lichtblauw;
   marge: 20px;
   opvulling: 20px
   }

7. Voeg de functie onButtonClick() toe aan het TypeScript-bestand voor de component, in "data-component.component.ts":

   onButtonClick() {
   }

8. Nog steeds in het TypeScript-bestand, voeg "Output" en "EventEmitter" toe aan de importlijst:

   importeren { Component, Uitvoer, EventEmitter, OnInit } van'@hoekig/kern';

9. Declareer binnen de klasse DataComponentComponent een uitvoervariabele voor de component met de naam "buttonWasClicked". Dit wordt een EventEmitter. Een EventEmitter is een ingebouwde klasse waarmee u een ander onderdeel kunt informeren wanneer er een gebeurtenis plaatsvindt.

   exporterenklas DataComponentComponent implementeert OnInit {
   @Uitvoer() buttonWasClicked = nieuw Evenementzender<leegte>();
   // ...
   }

10. Gebruik de gebeurteniszender "buttonWasClicked" in de functie onButtonClick(). Wanneer de gebruiker op de knop klikt, stuurt de gegevenscomponent deze gebeurtenis naar de bovenliggende app-component.

    onButtonClick() {
    dit.buttonWasClicked.emit();
    }

Naar gebeurtenissen in de onderliggende component luisteren vanuit de bovenliggende component

Als u de eigenschap Output van de onderliggende component wilt gebruiken, moet u luisteren naar de verzonden gebeurtenis van de bovenliggende component.

1. Gebruik de onderliggende component in "app.component.html". U kunt de uitvoer "buttonWasClicked" als eigenschap toevoegen bij het maken van de HTML-tag. Bind de gebeurtenis aan een nieuwe functie.

   <app-data-component (buttonWasgeklikt)="buttonInChildComponentWasClicked()">app-data-component>

2. Voeg in "app.component.ts" de nieuwe functie toe om de knopklikgebeurtenis af te handelen wanneer deze voorkomt in de onderliggende component. Maak een bericht wanneer de gebruiker op de knop klikt.

   bericht: snaar = ""
   buttonInChildComponentWasClicked() {
   dit.bericht = 'Er is op de knop in de onderliggende component geklikt';
   }

3. Toon het bericht in "app.component.html":

   <P>{{bericht}}P>

4. Typ de opdracht "ng serve" in een terminal om uw Angular-toepassing uit te voeren. Open het in een webbrowser op localhost: 4200. De bovenliggende en onderliggende componenten gebruiken verschillende achtergrondkleuren om ze gemakkelijker te kunnen onderscheiden.
5. Klik op de Klik hier knop. De onderliggende component stuurt de gebeurtenis naar de bovenliggende component, die het bericht zal weergeven.

Gegevens verzenden van een onderliggende component naar een bovenliggende component

U kunt ook gegevens van de onderliggende component naar de bovenliggende component verzenden.

1. Voeg in "data-component.component.ts" een variabele toe om een ​​lijst met tekenreeksen op te slaan die enkele gegevens bevatten.

   lijstVanMensen: snaar[] = ['Joey', 'John', 'James'];

2. Wijzig het retourtype van de buttonWasClicked-gebeurteniszender. Wijzig het van void in string[], zodat het overeenkomt met de lijst met strings die u in de vorige stap hebt opgegeven:

   @Uitvoer() buttonWasClicked = nieuw Evenementzender<snaar[]>();

3. Wijzig de functie onButtonClick(). Wanneer u de gebeurtenis naar de bovenliggende component verzendt, voegt u de gegevens als een argument toe aan de functie emit():

   onButtonClick() {
   dit.buttonWasClicked.emit(dit.lijstVanMensen);
   }

4. Pas in "app.component.html" de tag "app-data-component" aan. Voeg de "$event" toe aan de functie buttonInChildComponentWasClicked(). Dit bevat de gegevens die zijn verzonden vanuit de onderliggende component.

   <app-data-component (buttonWasgeklikt)="buttonInChildComponentWasClicked($event)">app-data-component>

5. Werk de functie bij in "app.component.ts" om de parameter voor de gegevens toe te voegen:

   buttonInChildComponentWasClicked (dataFromChild: snaar[]) {
   dit.bericht = 'Er is op de knop in de onderliggende component geklikt';
   }

6. Voeg een nieuwe variabele toe met de naam "data" om de gegevens op te slaan die afkomstig zijn van de onderliggende component:

   bericht: snaar = ""
   gegevens: snaar[] = []
   buttonInChildComponentWasClicked (dataFromChild: snaar[]) {
   dit.bericht = 'Er is op de knop in de onderliggende component geklikt';
   dit.data = dataFromChild;
   }

7. Toon de gegevens op de HTML-pagina:

   <P>{{data.join(', ')}}P>

8. Typ de opdracht "ng serve" in een terminal om uw Angular-toepassing uit te voeren. Open het in een webbrowser op localhost: 4200.
9. Klik op de Klik hier knop. De onderliggende component stuurt de gegevens van de onderliggende component naar de bovenliggende component.

Gegevens naar andere componenten verzenden met behulp van de Output Decorator

Er zijn andere decorateurs die u in Angular kunt gebruiken, zoals de Input-decorateur of de Component-decorateur. U kunt meer leren over hoe u andere decorateurs in Angular kunt gebruiken om uw code te vereenvoudigen.