{"id":10056,"date":"2021-04-22T19:42:45","date_gmt":"2021-04-22T17:42:45","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=10056"},"modified":"2023-10-24T18:12:51","modified_gmt":"2023-10-24T16:12:51","slug":"dyrektywa-ngif-oraz-operator-sharereplay-czyli-jak-radzic-sobie-z-wielokrotnym-wykorzystaniem-observabla-w-templatce","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/dyrektywa-ngif-oraz-operator-sharereplay-czyli-jak-radzic-sobie-z-wielokrotnym-wykorzystaniem-observabla-w-templatce\/","title":{"rendered":"Dyrektywa *ngIf oraz operator shareReplay, czyli jak radzi\u0107 sobie z wielokrotnym wykorzystaniem observabla w templatce"},"content":{"rendered":"\n

W Angular jedn\u0105 z bardziej eleganckich metod subskrypcji do strumieni jest u\u017cycie async pipe<\/strong>.
Dzi\u0119ki temu nie potrzebujemy pami\u0119ta\u0107, aby si\u0119 odsubskrybowa\u0107 w metodzie ngOnDestroy i nie mamy potencjalnych wyciek\u00f3w pami\u0119ci.<\/p>\n\n\n

\n<div class="company-address">\n  <h3>Address<\/h3>\n  <h4>{{ company$ | async }}<\/h4>\n  <p>{{ address.city }} {{ address.zipCode }}<\/p>\n  <p>{{ address.street }}<\/p>\n  <p>{{ address.phone }}<\/p>\n<\/div>\n<\/pre><\/div>\n\n\n
Doskonale wiemy, \u017ce je\u017celi na widoku u\u017cyjemy w r\u00f3\u017cnych miejscach kilka razy async pipe<\/strong> dla tego samego observabla, to b\u0119dziemy mieli kilka subskrypcji (mo\u017cemy to zaobserwowa\u0107 m.in. w konsoli), co niestety obni\u017ca wydajno\u015b\u0107 naszej aplikacji.<\/p>\n\n\n\n
Wyzwanie:<\/strong><\/h2>\n\n\n\n
Co by by\u0142o, gdyby\u015bmy potrzebowali tego samego strumienia u\u017cy\u0107 w pi\u0119ciu albo dziesi\u0119ciu miejscach ?! \ud83d\ude42<\/p>\n\n\n
\n<p>Conctact us: {{ (address$ | async).phone }} or email!<\/p>\n \n<div *ngIf="address$ | async as address" class="company-address">\n  <h3>Address<\/h3>\n  <h4>{{ company$ | async }}<\/h4>\n  <p>{{ address.city }} {{ address.zipCode }}<\/p>\n  <p>{{ address.street }}<\/p>\n  <p>{{ address.phone }}<\/p>\n<\/div>\n<\/pre><\/div>\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Jak wida\u0107 na za\u0142\u0105czonym kodzie powy\u017cej, address<\/em> zosta\u0142 pobrany dwukrotnie z uwagi na u\u017cycie dwa razy async pipe<\/strong>. Nie jest to dobra praktyka.<\/p>\n\n\n\n
Rozwi\u0105zanie 1:<\/h2>\n\n\n\n
Pomocna mo\u017ce by\u0107 tutaj dyrektywa strukturalna *ngIf<\/strong>. Mo\u017cna j\u0105 wykorzysta\u0107 np. do u\u017cycia observabli z async pipe w kilku miejscach jednocze\u015bnie w wygodny spos\u00f3b.<\/p>\n\n\n
\n<ng-container *ngIf="address$ | async as address">\n  <p>Conctact us: {{ address.phone }} or email!<\/p>\n   \n  <div class="company-address">\n    <h3>Address<\/h3>\n    <h4>{{ company$ | async }}<\/h4>\n    <p>{{ address.city }} {{ address.zipCode }}<\/p>\n    <p>{{ address.street }}<\/p>\n    <p>{{ address.phone }}<\/p>\n  <\/div>\n<\/ng-container>\n<\/pre><\/div>\n\n\n
Zalet\u0105 tego rozwi\u0105zania jest poprawienie jako\u015bci kodu, oraz jego wydajno\u015bci.<\/p>\n\n\n\n
Rozwi\u0105zanie 2:<\/strong><\/h2>\n\n\n\n
Innym rozwi\u0105zaniem, kt\u00f3re mo\u017ce nam pom\u00f3c rozwi\u0105za\u0107 powy\u017csze wyzwanie, jest skorzystanie z jednego z operator\u00f3w RxJs, jakim jest shareReplay<\/strong>. Dzi\u0119ki cache-owaniu, zapami\u0119tuje on ostatnio przychodz\u0105ce wiadomo\u015bci, przez co nie powiela ponownego wys\u0142ania np. \u017c\u0105da\u0144 HTTP.<\/p>\n\n\n\n
Aby zapewni\u0107 unikni\u0119cie podw\u00f3jnej subskrypcji, wystarczy powy\u017cszy operator zastosowa\u0107 w nast\u0119puj\u0105cy spos\u00f3b. Wy\u015bwietli nam w konsoli tylko jedn\u0105 subskrypcj\u0119 do naszego adresu, mimo u\u017cycia kilku async pipe<\/strong> w widoku HTML.<\/p>\n\n\n
\nngOnInit(): void {\n  this.address$ = of(this.addressApi).pipe(\n     tap(address => console.log('address', address)),\n     shareReplay()\n  );\n}\n<\/pre><\/div>\n\n\n
Podsumowanie:<\/strong><\/h2>\n\n\n\n
Przedstawi\u0142em tutaj dwa sposoby na radzenie sobie z wielokrotnym wykorzystaniem strumieni. Oczywi\u015bcie, istniej\u0105 te\u017c inne mo\u017cliwo\u015bci rozwi\u0105zania tego samego problemu. \ud83d\ude42<\/p>\n\n\n\n
Je\u017celi potrzebujesz, ju\u017c teraz wykorzystaj kod i do\u0142\u0105cz do swojego projektu, nie robi\u0105c niepotrzebnych async pipe<\/strong> w wielu miejscach i popraw wydajno\u015b\u0107 swojej aplikacji. ?<\/p>\n\n\n
\n            \n
\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
\n            5\/5 ( vote: 1)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
W Angular jedn\u0105 z bardziej eleganckich metod subskrypcji do strumieni jest u\u017cycie async pipe.Dzi\u0119ki temu nie potrzebujemy pami\u0119ta\u0107, aby si\u0119 … Continued<\/a><\/p>\n","protected":false},"author":270,"featured_media":10490,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[867,202,18,111],"class_list":["post-10056","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-angular","tag-javascript","tag-javascript-frameworks","tag-web-development"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/01\/bBlog.png","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/10056"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/270"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=10056"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/10056\/revisions"}],"predecessor-version":[{"id":25212,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/10056\/revisions\/25212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/10490"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=10056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=10056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=10056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}