Jak korzystać z dekoratora danych wyjściowych w Angular

W Angular strona internetowa może zawierać wiele różnych komponentów wielokrotnego użytku. Każdy składnik zwykle zawiera własną logikę TypeScript, szablon HTML i styl CSS.

Można również ponownie wykorzystać komponenty wewnątrz innych komponentów. W takim przypadku można użyć dekoratora Output do przesłania informacji z komponentu potomnego z powrotem do jego komponentu nadrzędnego.

Dekoratora Output można również użyć do nasłuchiwania zdarzeń zachodzących w komponencie potomnym.

Jak dodać dekorator wyjściowy do komponentu potomnego

Najpierw musisz utworzyć nową aplikację Angular z komponentem nadrzędnym i komponentem podrzędnym.

Po utworzeniu komponentu nadrzędnego i podrzędnego można użyć dekoratora danych wyjściowych do przesyłania danych i nasłuchiwania zdarzeń między tymi dwoma komponentami.

1. Stwórz nowy Aplikacja kątowa. Domyślnie „aplikacja” to nazwa głównego komponentu. Ten komponent zawiera trzy główne pliki: „app.component.html”, „app.component.css” i „app.component.ts”.
2. W tym przykładzie komponent „aplikacja” będzie działał jako komponent nadrzędny. Zamień całą zawartość w „app.component.html” na następującą:

   <dzklasa=„komponent macierzysty”>
   <h1> To jest komponent nadrzędny h1>
   dz>

3. Dodaj stylizację do nadrzędnego komponentu aplikacji w „app.component.css”:

   .komponent nadrzędny {
   rodzina czcionek: Arial, Helvetica, bezszeryfowe;
   kolor tła: jasnokoralowy;
   wyściółka: 20piks
   }

4. Użyj polecenia „ng generuj komponent”, aby utwórz nowy komponent Angular zwany „komponentem danych”. W tym przykładzie „data-component” będzie reprezentować komponent podrzędny.

   ng g c składnik danych

5. Dodaj zawartość do komponentu podrzędnego w „data-component.component.html”. Zastąp bieżącą zawartość, aby dodać nowy przycisk. Powiąż przycisk z funkcją, która zostanie uruchomiona, gdy użytkownik go kliknie:

   <dzklasa=„komponent podrzędny”>
   <P> To jest komponent potomny P>
   <przycisk (Kliknij)="onButtonClick()">Kliknijprzycisk>
   dz>

6. Dodaj stylizację do komponentu potomnego w „data-component.component.css”:

   .komponent potomny {
   rodzina czcionek: Arial, Helvetica, bezszeryfowe;
   kolor tła: jasny niebieski;
   margines: 20piks;
   wyściółka: 20piks
   }

7. Dodaj funkcję onButtonClick() do pliku TypeScript dla komponentu w „data-component.component.ts”:

   onButtonClick() {
   }

8. Pozostając w pliku TypeScript, dodaj „Output” i „EventEmitter” do listy importów:

   import { Składnik, dane wyjściowe, Emiter zdarzeń, OnInit } z„@kątowy/rdzeń”;

9. Wewnątrz klasy DataComponentComponent zadeklaruj zmienną wyjściową dla komponentu o nazwie „buttonWasClicked”. To będzie EventEmitter. EventEmitter to wbudowana klasa, która umożliwia informowanie innego komponentu o wystąpieniu zdarzenia.

   eksportklasa DataComponentComponent przybory Początek {
   @Wyjście() przycisk został kliknięty = nowy Emiter zdarzenia<próżnia>();
   // ...
   }

10. Użyj emitera zdarzeń „buttonWasClicked” wewnątrz funkcji onButtonClick(). Gdy użytkownik kliknie przycisk, komponent danych wyśle ​​to zdarzenie do komponentu aplikacji nadrzędnej.

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

Jak nasłuchiwać zdarzeń w komponencie podrzędnym z komponentu nadrzędnego

Aby użyć właściwości Output komponentu podrzędnego, musisz nasłuchiwać emitowanego zdarzenia z komponentu nadrzędnego.

1. Użyj komponentu podrzędnego w pliku „app.component.html”. Możesz dodać dane wyjściowe „buttonWasClicked” jako właściwość podczas tworzenia tagu HTML. Powiąż zdarzenie z nową funkcją.

   <komponent danych aplikacji (przycisk został kliknięty)=„buttonInChildComponentWasClicked()”>komponent danych aplikacji>

2. Wewnątrz „app.component.ts” dodaj nową funkcję do obsługi zdarzenia kliknięcia przycisku, gdy wystąpi ono w komponencie podrzędnym. Utwórz wiadomość, gdy użytkownik kliknie przycisk.

   wiadomość: strunowy = ""
   buttonInChildComponentWasClicked() {
   Tenwiadomość = „Kliknięto przycisk w komponencie potomnym”;
   }

3. Wyświetl komunikat w „app.component.html”:

   <P>{{wiadomość}}P>

4. Wpisz polecenie „ng serve” w terminalu, aby uruchomić aplikację Angular. Otwórz go w przeglądarce internetowej pod adresem localhost: 4200. Komponenty nadrzędny i podrzędny używają różnych kolorów tła, aby ułatwić ich rozróżnienie.
5. Kliknij na Kliknij przycisk. Komponent podrzędny wyśle ​​zdarzenie do komponentu nadrzędnego, który wyświetli komunikat.

Jak wysłać dane z komponentu podrzędnego do komponentu nadrzędnego

Możesz również wysłać dane z komponentu podrzędnego do komponentu nadrzędnego.

1. W „data-component.component.ts” dodaj zmienną do przechowywania listy ciągów zawierających pewne dane.

   listaOsoby: strunowy[] = [„Joey”, 'Jan', 'James'];

2. Zmodyfikuj zwracany typ emitera zdarzeń buttonWasClicked. Zmień go z void na string[], aby pasował do listy ciągów zadeklarowanych w poprzednim kroku:

   @Wyjście() przycisk został kliknięty = nowy Emiter zdarzenia<strunowy[]>();

3. Zmodyfikuj funkcję onButtonClick(). Wysyłając zdarzenie do komponentu nadrzędnego, dodaj dane jako argument do funkcji emit():

   onButtonClick() {
   Ten.buttonWasClicked.emit(Ten.listOsób);
   }

4. W „app.component.html” zmodyfikuj tag „app-data-component”. Dodaj „$event” do funkcji buttonInChildComponentWasClicked(). Zawiera dane wysłane z komponentu podrzędnego.

   <komponent danych aplikacji (przycisk został kliknięty)="buttonInChildComponentWasClicked($event)">komponent danych aplikacji>

5. Zaktualizuj funkcję w „app.component.ts”, aby dodać parametr dla danych:

   buttonInChildComponentWasKliknięto (dataFromChild: strunowy[]) {
   Tenwiadomość = „Kliknięto przycisk w komponencie potomnym”;
   }

6. Dodaj nową zmienną o nazwie „data”, aby przechowywać dane pochodzące z komponentu potomnego:

   wiadomość: strunowy = ""
   dane: strunowy[] = []
   buttonInChildComponentWasKliknięto (dataFromChild: strunowy[]) {
   Tenwiadomość = „Kliknięto przycisk w komponencie potomnym”;
   Ten.data = daneOdDziecka;
   }

7. Wyświetl dane na stronie HTML:

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

8. Wpisz polecenie „ng serve” w terminalu, aby uruchomić aplikację Angular. Otwórz go w przeglądarce internetowej pod adresem localhost: 4200.
9. Kliknij na Kliknij przycisk. Komponent podrzędny wyśle ​​dane z komponentu podrzędnego do komponentu nadrzędnego.

Wysyłanie danych do innych komponentów za pomocą dekoratora danych wyjściowych

Istnieją inne dekoratory, których możesz użyć w Angular, takie jak dekorator wejścia lub dekorator komponentu. Możesz dowiedzieć się więcej o tym, jak możesz użyć innych dekoratorów w Angular, aby uprościć swój kod.