מי שמכיר pipes באנגולר, כנראה מכיר היטב את async . שימושי מאוד!
מי שפחות מכיר, אז מדובר בפייפ שיודע לקבל מידע שחוזר כ promise ולהמתין למידע , וכאשר מידע המידע, להציג אותו או כל בקשה אחרת שתחשקו בה ברגע שחוזרת תשובה שהתקבל המידע או התעדכן המידע. למעשה async pipe נרשם (subscribe) לפרומיס ( Promise\observable) ומחזיר את הערך האחרון שהתקבל. כאשר הפייפ לא יהיה נחוץ יותר , למשל הקומפוננטה כבר לא בדף, הפייפ יבצע ניתוק אוטומטי מהפרומיס .(unsubscribe).
אנגולר async pipe | דוגמה פשוטה:
<h2>About async pipe </h2>:
<span>Wait for it... {{ greeting$ | async }}</span>
</div>דרך נוחה לשימוש עם async pipe
דרך נוחה לשימוש בasync pipe בקומפוננטה שלכם היא בצורה הבאה, לעטוף את הפרומיס ב ngIf . ןמתן שם נוח יותר לכתיבה (למשל במקרה של observables לרוב אוהבים לשים $ אחרי שם המשתנה, וכן אפשר לייצר הפרדה בכתיבה כך שתיהיה יותר דיקלרטיבית(כתיבה ברורה יותר כאשר קוראים קטע קוד).
<h2>About async pipe </h2>:
<div *ngIf="(greeting$ | async) as greeting" class="container"></div>
<span *ngFor="let greet of greeding">{{greet}}</span>
</div>שימוש מורובה באותה הטכניקה | multiple async pipe
שימוש נוסף ואף נפוץ הוא שימוש של כמה פרומיסים שחוזרים ואז נרצה לאחד אותם, נוכל לעשות שימוש ב async pipe כמו בדוגמה פה:
<h2>About async pipe </h2>:
<div *ngIf="{greeting: greeting$ | async ,persons: persons$ | async } as data" class="container"></div>
<span *ngFor="let greet of data.greeting">{{greet}}</span>
<span *ngFor="let person of data.persons">{{person}}</span>
</div>וזהו זה 🙂
המשך כתיבה מהנה.
