זה היה אחד מהימים שהייתי עסוק בעבודה על תכונות חדשות לפרויקט המשרדי שלי. פתאום משהו משך את תשומת ליבי:
בעת בדיקת ה- DOM ראיתי את ngcontentהמריחה על אלמנטים על ידי Angular. הממ ... אם הם מכילים את האלמנטים ב- DOM הסופי, אז מה התועלת ? באותה תקופה התבלבלתי בין לבין .
במסע לדעת את התשובות לשאלותי גיליתי את המושג . להפתעתי, היה גם *ngTemplateOutlet. התחלתי את דרכי בחיפוש אחר בהירות לגבי שני מושגים, אך כעת היו לי ארבעה מהם, שנשמעו כמעט זהים!
האם אי פעם היית במצב זה? אם כן, אז אתה במקום הנכון. אז בלי להתייחס עוד בואו ניקח אותם בזה אחר זה.
1.
כפי שהשם מרמז הוא אלמנט תבנית שמשתמשת זוויתית עם הנחיות מבניות ( *ngIf, *ngFor, [ngSwitch]והנחיות מותאמות אישית).
אלמנטים תבניתיים אלה פועלים רק בנוכחות הוראות מבניות . זוויתית עוטפת את אלמנט המארח (עליו מוחלת ההנחיה) בתוכווצורכת אתה- DOM המוגמר על ידי החלפתו בתגובות אבחוניות.
שקול דוגמה פשוטה ל *ngIf:
המוצג לעיל הוא הפרשנות הזוויתית של *ngIf. Angular מכניס את אלמנט המארח עליו מוחלת ההנחיה בתוכו ושומר על המארח כפי שהוא. ה- DOM הסופי דומה למה שראינו בתחילת מאמר זה:
נוֹהָג:
ראינו כיצד Angular משתמש אך מה אם נרצה להשתמש בו? מכיוון שאלמנטים אלה פועלים רק לפי הנחיה מבנית, אנו יכולים לכתוב כ:
הנה homeהוא booleanרכוש של סט רכיב trueהערך. הפלט של הקוד הנ"ל ב- DOM:
שום דבר לא הופץ! :(
אך מדוע איננו יכולים לראות את המסר שלנו גם לאחר שימוש נכון בהנחיה מבנית?
זו הייתה התוצאה הצפויה. כפי שכבר דנו, Angular מחליפה את הערות האבחון. אין ספק שהקוד שלעיל לא ייצור שום שגיאה, מכיוון ש- Angular תקין לחלוטין במקרה השימוש שלך. לעולם לא היית יודע מה בדיוק קרה מאחורי הקלעים.
בואו נשווה את שני ה- DOM שלמעלה שניתנו על ידי Angular:
אם אתה צופה מקרוב, יש תגית נוספת אחת ב- DOM הסופי של דוגמה 2 . הקוד שפירש אנגולר היה:
Angular עטף את המארח שלך בתוך אחר והמיר לא רק את ההערות החיצוניות לאבחון אלא גם את הפנימי! זו הסיבה שלא יכולת לראות שום דבר מההודעה שלך.
כדי להיפטר מכך ישנן שתי דרכים להשיג את התוצאה הרצויה:
שיטה 1:
בשיטה זו, אתה מספק ל- Angular את הפורמט ללא הסוכר שאינו זקוק לעיבוד נוסף. הפעם אנגולר היה ממיר רק לתגובות אך משאיר את התוכן בתוכו ללא פגע (הם כבר לא נמצאים בתוכם כפי שהיה במקרה הקודם). לפיכך, הוא יציג את התוכן כהלכה.
למידע נוסף על אופן השימוש בפורמט זה עם הנחיות מבניות אחרות עיין במאמר זה.
שיטה 2:
זהו פורמט בלתי נראה לעיתים נדירות והוא משמש (באמצעות שני אחים ). כאן אנו נותנים התייחסות לתבנית לזה *ngIfשלה thenכדי לומר לו באיזו תבנית יש להשתמש אם התנאי נכון.
לא מומלץ להשתמש במספר כזה (אתה יכול להשתמש במקום זאת) מכיוון שזה לא מה שהם מיועדים אליו. הם משמשים כמכולה לתבניות הניתנות לשימוש חוזר במספר מקומות. נדבר על כך יותר בחלק מאוחר יותר במאמר זה.
2.
האם אי פעם כתבת או ראית קוד הדומה לזה:
הסיבה שרבים מאיתנו כותבים קוד זה היא חוסר היכולת להשתמש בהוראות מבניות מרובות על אלמנט מארח אחד ב- Angular. עכשיו קוד זה עובד בסדר, אך הוא מציג מספר ריק יותר ב- DOM אם item.idהוא ערך מזויף שאולי לא נדרש.
אולי לא מודאגים מדוגמה פשוטה כזו, אך מיישום ענק שיש בו DOM מורכב (כדי להציג עשרות אלפי נתונים) זה עשוי להיות מטריד מכיוון שהאלמנטים עשויים להיות קשורים למאזינים שעדיין יהיו שם DOM מאזין לאירועים.
מה שעוד יותר גרוע הוא רמת הקינון שעליך לעשות כדי ליישם את הסטיילינג שלך (CSS)!
אין דאגות, עלינו להציל!
ה- Angular הוא אלמנט קיבוץ שאינו מפריע לסגנונות או לפריסה מכיוון ש- Angular אינו מכניס אותו ל- DOM .
אז אם נכתוב את הדוגמה 1 שלנו עם :
אנו מקבלים את ה- DOM הסופי כ:
ראה שנפטרנו מאותם ריקים . עלינו להשתמש כאשר אנו רק רוצים להחיל הנחיות מבניות מרובות מבלי להכניס אלמנט נוסף ב- DOM שלנו.
למידע נוסף עיין במסמכים. יש מקרה שימוש אחר שבו הוא משמש להזרקת תבנית באופן דינמי לדף. אסקור את מקרה השימוש הזה בחלק האחרון של מאמר זה.
3.
הם משמשים ליצירת רכיבים הניתנים להגדרה. פירוש הדבר שניתן להגדיר את הרכיבים בהתאם לצרכי המשתמש בו. זה ידוע בכינויו הקרנת תוכן . רכיבים המשמשים בספריות שפורסמו עושים שימוש בכדי להגדיר את עצמם.
שקול רכיב פשוט :
תוכן ה- HTML המועבר בתוך תגי הפתיחה והסגירה של הרכיב הוא התוכן שיש להקרין. זה מה שאנחנו מכנים הקרנת תוכן . התוכן יוצג בתוך הרכיב. זה מאפשר לצרכן של רכיב להעביר כל כותרת תחתונה מותאמת אישית בתוך הרכיב ולשלוט במדויק כיצד הוא מעוניין שהוא יינתן.
תחזיות מרובות:
מה אם היית יכול להחליט איזה תוכן צריך להיות ממוקם היכן? במקום כל תוכן שמוקרן בתוך יחיד , אתה יכול גם לשלוט כיצד התוכן יוקרן עם selectהתכונה . נדרש בורר אלמנטים כדי להחליט איזה תוכן להקרין בתוך מסוים .
כך:
שינינו את ההגדרה לביצוע הקרנת ריבוי תוכן. selectהתכונה בוחרת את סוג התוכן שיוצג בתוך בפרט . כאן עלינו selectלעבד לראשונה את h1אלמנט הכותרת . אם לתוכן המוקרן אין h1אלמנט הוא לא יציג שום דבר. באופן דומה השני selectמחפש a div. שאר התוכן מועבר בתוך האחרון ללא select.
קריאה לרכיב תיראה כך:
4. * ngTemplateOutlet
... הם משמשים כמכולה לתבניות הניתנות לשימוש חוזר במספר מקומות. נדבר על כך יותר בחלק מאוחר יותר במאמר זה.... יש מקרה שימוש אחר שבו הוא משמש להזרקת תבנית באופן דינמי לדף. אסקור את מקרה השימוש הזה בחלק האחרון של מאמר זה.
זהו החלק בו נדון בשתי הנקודות לעיל שהוזכרו קודם. *ngTemplateOutletמשמש לשני תרחישים - להכנסת תבנית משותפת בחלקים שונים של תצוגה ללא קשר לולאות או מצב ולהכין רכיב מוגדר במיוחד.
שימוש חוזר בתבנית:
שקול תצוגה שבה עליך להוסיף תבנית במספר מקומות. לדוגמא, לוגו חברה שיוצב בתוך אתר. אנו יכולים להשיג זאת על ידי כתיבת התבנית של הלוגו פעם אחת ושימוש חוזר בכל מקום בתצוגה.
להלן קטע הקוד:
כפי שניתן לראות, פשוט כתבנו את תבנית הלוגו פעם אחת והשתמשנו בה שלוש פעמים באותו דף עם שורת קוד אחת!
*ngTemplateOutletמקבל גם אובייקט הקשר שניתן להעביר כדי להתאים אישית את פלט התבנית המשותף. למידע נוסף על אובייקט ההקשר עיין במסמכים הרשמיים.
רכיבים הניתנים להתאמה אישית:
מקרה השימוש השני עבור *ngTemplateOutletרכיבים מותאמים אישית במיוחד. שקול את הדוגמה הקודמת שלנו לרכיב עם כמה שינויים:
למעלה מוצגת הגרסה של שינוי רכיב אשר מקבל שלושה מאפייני קלט - headerTemplate, bodyTemplate, footerTemplate. להלן קטע הטקסט עבור project-content.ts:
מה שאנחנו מנסים להשיג כאן הוא להראות כותרת עליונה, גוף תחתונה כמו שקיבלו מהרכיב ההורה של . אם אחד מהם לא מסופק, הרכיב שלנו יציג את תבנית ברירת המחדל במקומה. לפיכך, יצירת רכיב מותאם אישית במיוחד.
כדי להשתמש ברכיב ששונו לאחרונה:
כך אנו מעבירים את התבניות ref למרכיב שלנו. אם אחד מהם לא מועבר, הרכיב יציג את תבנית ברירת המחדל.
ng-content לעומת * ngTemplateOutlet
שניהם עוזרים לנו להשיג רכיבים מותאמים אישית במיוחד, אך אילו לבחור ומתי?
ניתן לראות בבירור *ngTemplateOutletשנותן לנו עוד קצת כוח להציג את תבנית ברירת המחדל אם לא מסופקת.
זה לא המקרה עם ng-content. זה מעבד את התוכן כמו שהוא. מקסימום תוכלו לפצל את התוכן ולעבד אותם במיקומים שונים של התצוגה שלכם בעזרת selectהתכונה. אינך יכול לעבד את התוכן בתנאי ng-content. עליכם להציג את התוכן שמתקבל מההורה ללא אמצעים לקבל החלטות על סמך התוכן.
עם זאת, הבחירה בבחירה בין השניים תלויה לחלוטין במקרה השימוש שלך. לפחות עכשיו יש לנו נשק חדש *ngTemplateOutletבארסנל שלנו שמספק יותר שליטה על התוכן בנוסף לתכונות של ng-content!