{"id":644,"date":"2021-12-30T16:15:21","date_gmt":"2021-12-30T15:15:21","guid":{"rendered":"https:\/\/dziewczynanafroncie.pl\/?p=644"},"modified":"2021-12-30T16:15:21","modified_gmt":"2021-12-30T15:15:21","slug":"angular-input-output","status":"publish","type":"post","link":"https:\/\/dziewczynanafroncie.pl\/angular-input-output\/","title":{"rendered":"@Input() @Output() &#8211; przekazywanie danych"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Dzisiaj par\u0119 s\u0142\u00f3w o przekazywaniu danych poprzez dekoratory <strong>@Input()<\/strong> oraz <strong>Output()<\/strong>.<br><br>Angular to \u015bwietny framework dzi\u0119ki kt\u00f3remu mo\u017cemy tworzy\u0107 szybkie \u00a0i niezawodne aplikacje internetowe, dzi\u0119ki wielu technikom dzielenia kodu. Dla mnie cechy Angulara jako frameworka s\u0105 po prostu niesamowite. Ka\u017cdy fragment tworzonego kodu ma specjalny cel i wymaga minimalnej liczby powt\u00f3rze\u0144.<\/p>\n\n\n\n\n\n\n\n<p class=\"wp-block-paragraph\">Wspominaj\u0105c o nie powtarzalnym kodzie, mo\u017cemy p\u00f3j\u015b\u0107 odrobine dalej, a mianowicie do kolejnej wspania\u0142ej funkcji jak\u0105 posiada Angular, tj. programowania modu\u0142owego przy u\u017cyciu komponent\u00f3w..<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Komponenty zapewniaj\u0105 nam \u015bwietny spos\u00f3b na podzia\u0142 kodu, kt\u00f3ry jest w wi\u0119kszo\u015bci powtarzalny. Przyk\u0142adami mog\u0105 by\u0107 modale, notyfikacje , formularze, obs\u0142uga b\u0142\u0119d\u00f3w itp. Istnieje niezliczona ilo\u015b\u0107 zastosowa\u0144 dzielenia logiki zawartej w komponentach.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ok \u015awietnie! wi\u0119c dzielimy nasze modu\u0142y na komponenty. Teraz nasza aplikacja posiada modu\u0142y, kt\u00f3re s\u0105 dalej podzielone na komponenty.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I to ju\u017c? Ale zapytacie jak przekazujemy dane mi\u0119dzy tymi komponentami?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bardzo prosto ! wi\u0119c w zasadzie s\u0105 trzy najwa\u017cniejsze sposoby przesy\u0142ania danych mi\u0119dzy komponentami, kt\u00f3rych pozwala nam u\u017cy\u0107 framework:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>@ViewChild()<\/strong><\/li><li><strong>@Input() and @Output() (Tylko je\u017celi komponent ma relacje rodzic \u2013 dziecko)<\/strong><\/li><li><strong>Servisy<\/strong><br> <\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">W tym artykule skupimy si\u0119 na drugim sposobie dzi\u0119ki kt\u00f3remu mo\u017cna \u0142atwo przekazywa\u0107 dane z komponent\u00f3w nadrz\u0119dnych do komponent\u00f3w potomnych lub odwrotnie, u\u017cywaj\u0105c dekorator\u00f3w <strong>@Input<\/strong>, <strong>@Output<\/strong> i <strong>EventEmitter<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Postaram si\u0119 opisa\u0107 je jeden po drugim<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">@Input() <\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>@Input()<\/strong> s\u0142u\u017cy do \u0142\u0105czenia w\u0142a\u015bciwo\u015bci jednego komponentu (zwykle komponentu podrz\u0119dnego) z innym komponentem (zwykle komponentem nadrz\u0119dnym).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">@Input() someData: any; <\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">@Output() <\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Natomiast <strong>@Output()<\/strong> s\u0142u\u017cy do \u0142\u0105czenia w\u0142a\u015bciwo\u015bci komponentu podrz\u0119dnego i emitowania go przez <strong>EventEmitter<\/strong>. Tak wi\u0119c za ka\u017cdym razem, gdy komponent potomny musi przekaza\u0107 pewne dane do komponentu rodzica, mo\u017ce to zrobi\u0107, emituj\u0105c je przez emiter zdarze\u0144.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">@Output() exampleEmitter = new EventEmitter() <\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Kr\u00f3tko m\u00f3wi\u0105c, <strong>@Input()<\/strong> s\u0142u\u017cy do przekazywania danych od rodzica do komponentu podrz\u0119dnego, a <strong>@Output()<\/strong> s\u0142u\u017cy do przekazywania danych od komponentu podrz\u0119dnego do komponentu (dziecka) nadrz\u0119dnego (rodzica).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zobrazujmy to na przyk\u0142adzie:<\/h3>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Komponent potomny (TS)<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">import { Component, Input, Output, EventEmitter } from '@angular\/core';\n\n @Component({\n   selector: example,\n   templateUrl: '.\/ example.component.html',\n })\n\n export class ExampleComponent {\n  @Input() someData: any;\n  @Output() exampleEmitter = new EventEmitter();\n\n  handleEmitData= (data) => {\n     this. exampleEmitter.emit(data)\n   }\n }<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Komponent nadrz\u0119dny (HTML)<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;div class=\"row\">\n &lt;div class=\"col-12\">\n   &lt;example [someData]=\"data\" (handleEmitData)=\"emitterInvokeFunction($event)\">\n &lt;\/div>\n&lt;\/div>     <\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">W przyk\u0142adzie <strong>someData<\/strong> jest u\u017cywany do przekazywania danych z komponentu nadrz\u0119dnego do komponentu podrz\u0119dnego i jest przekazywany za pomoc\u0105 wi\u0105zania w\u0142a\u015bciwo\u015bci przy u\u017cyciu nawias\u00f3w <strong>[]<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>handleEmitData <\/strong>s\u0142u\u017cy do emitowania danych z komponentu podrz\u0119dnego do komponentu nadrz\u0119dnego i jest odbierany w komponencie nadrz\u0119dnym przy u\u017cyciu wi\u0105zania zdarze\u0144 za pomoc\u0105 nawias\u00f3w <strong>()<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wi\u0105zania w komponencie nadrz\u0119dnym (rodzica)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Spos\u00f3b zastosowania tych dw\u00f3ch r\u00f3\u017cnych wi\u0105za\u0144 dotyczy danych wej\u015bciowych i wyj\u015bciowych.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Za pomoc\u0105 [] <\/strong>wi\u0105zanie odwo\u0142uj\u0105ce si\u0119 do przekazania danych do komponentu.<\/li><li><strong>Za pomoc\u0105 () <\/strong>wi\u0105zanie odwo\u0142uj\u0105ce si\u0119 do odebrania danych z \u00a0komponentu.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Nazywamy to jednokierunkowym wi\u0105zaniem danych, poniewa\u017c dane przep\u0142ywaj\u0105 tylko w jedn\u0105 stron\u0119, do lub z komponentu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wnioski<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Podsumujmy, <strong>@Input()<\/strong> i <strong>@Output()<\/strong> s\u0142u\u017c\u0105 do przekazywania danych mi\u0119dzy komponentami nadrz\u0119dnymi oraz podrz\u0119dnymi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wi\u0119cej o pozosta\u0142ych dw\u00f3ch sposobach przekazywania danych postaram si\u0119 napisa\u0107 w przysz\u0142ych artyku\u0142ach. Je\u015bli nadal jeste\u015b zainteresowany przeczytaniem czego\u015b wi\u0119cej, mo\u017cesz zapozna\u0107 si\u0119 z pozosta\u0142ymi artyku\u0142ami.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je\u015bli podoba\u0142o Ci si\u0119 to, co czytasz, lub je\u015bli masz jakie\u015b pytania zostaw komentarz i \u0142apk\u0119 w g\u00f3r\u0119 \ud83d\ude0a<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">\ud83d\udc47\ud83d\udc47\ud83d\udc47 Je\u017celi podoba\u0142 Ci si\u0119 ten artyku\u0142 zostaw po sobie \u015blad w komentarzach \ud83d\udc47\ud83d\udc47\ud83d\udc47<\/h6>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-drop-cap wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dzisiaj par\u0119 s\u0142\u00f3w o przekazywaniu danych poprzez dekoratory @Input() oraz Output(). Angular to \u015bwietny framework dzi\u0119ki kt\u00f3remu mo\u017cemy tworzy\u0107 szybkie \u00a0i niezawodne aplikacje internetowe, dzi\u0119ki wielu technikom dzielenia kodu. Dla mnie cechy Angulara jako frameworka s\u0105 po prostu niesamowite. Ka\u017cdy fragment tworzonego kodu ma specjalny cel i wymaga minimalnej liczby powt\u00f3rze\u0144.<\/p>\n","protected":false},"author":1,"featured_media":645,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[13,42,43,44],"class_list":["post-644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-input","tag-output","tag-przekazywanie-danych"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/comments?post=644"}],"version-history":[{"count":2,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":650,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/644\/revisions\/650"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/645"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}