RSS

Angular 2.0 Component Decorator

21 אפר

 

בפוסט זה אני רוצה להסביר את כל הפרטים הטכנים על @Component.

כאשר אנחנו כותבים באנגולר מחלקה מסוג component אנחנו חייבים להוסיף @Component עם כל הפרטים, כמו למשל selector, template וכ"ו. הפונקציה Component יוצרת מהמידע הנ"ל מחלקה בשם ComponentMetadata ושומרת את המידע כ-metadata על המחלקה.

: Reflect Metadata API

אנגולר 2 משתמש ב-Reflect Metadata כדי לשמור את המידע שנתנו ב- @Component.  כאן אנגולר מגדיר את הפונקציה Component. והפונקציה makeDecorator משתמש ב-Reflect Metadata כדי לאחסן את המידע ביחד עם המחלקה שלכם.

למה זה מעניין?

בעיה: רוצים לרשת מחלקה מסוג Component וגם את הגדרות שלה ב-@Component.

פתרון:

כתבתי decorator חדש , ngExComponent שיכול לקבל arg נוסף של מחלקה. ה- ngExComponentקורא את ה-metadata מהמחלקה וממזג אותם עם ה-metadata של המחלקה היורשת. ראו קוד:

export function ngExComponent(metadata,component?){
   
var
merageMetadata = component?
        Object.assign(getComponentMetadata(component),metadata):
        metadata;
   
return
Component(merageMetadata);
}

 

דוגמא לשימוש:

@Component({
    selector:'users',
    providers:[UserProxy],
    directives: [User],
})
class BaseUser{}
// Derive class
@ngExComponent({     template: `...`
},BaseUser) export class User extends BaseUser{ ... }
 
הסברים:
היתרון בשיטה זו שאני יכול במחלקה BaseUser להגדיר את כל ה-metadata המשותפים לכל סוגי 
ה-User. המחלקה היורשת יכולה לדרוס את ה-metadata שהיא צריכה.
 
לקוחות שלא אוהבים לעבוד עם ngExComponent, אני מוסיף למחלקה העליונה מתודה סטטית
 בשם getMetadata, ראו קוד:
@Component({
    selector:'users',
    providers:[UserProxy],
    dirctives: [User],
})
class BaseUser{
    static getMetadata():ComponentMetadata{
        var result;
        Reflect.getMetadata('annotations', BaseUser)
            .forEach(metadata => {
                if (metadata.constructor.name === 'ComponentMetadata'){
                    result =  metadata;
                }
            });
        return result;
    }
}
 

בעיה: איך משנים בזמן ריצה את ComponentMetadata, כמו למשל templateUrl או styleUrls?

 

פתרון:

אנגולר משתמש בשרותים מסוג Resolvers כדי לקרוא את ה-metadata של Component.

clip_image002

אנחנו יכולים לדרוס את שירותים אלו ואז לעשות מניפולציה על הנתונים לפני שאנגולר משתמש בהם. קראו פוסט שכתבתי בנושא. פתרון זה מאפשר לי להגדיר ל- Component  אחת ומספר views, למשל.

 

אשמח לקבל פידבקים J

נושאים אלו אני מלמד בקורס שלי Angular 2.0 Development לפרטים נוספים לחצו כאן.

 

מודעות פרסומת
 
4 תגובות

פורסם ע"י ב- אפריל 21, 2016 ב- Uncategorized

 

4 תגובות ל-“Angular 2.0 Component Decorator

  1. שלומי

    אפריל 21, 2016 at 10:56 am

    צריך להזהר עם שינוי metadata בזמן ריצה.
    בימים אלו נכנס לקוד של אנגולר הקונספט offline compilation שמאפשר לקמפל את כל הטמפלטים וchange detectors בזמן יצירת הקוד לפרודקשן.

    בסוף התהליך יוצא תוצר שמבטל את הצורך לבצע את הקימפול הזה בזמן ריצה וזה חוסך מלא זמן בקליינט.
    בנוסף כל הקוד של אנגולר, כלומר חלק נכבד מהפריימוורק כבר לא רלוונטי מכיוון שאין צורך בו כי זה בוצע בזמן הקימפול, גם כאן מוסיף מהירות לזמן טעינה ראשון.

    צריך לשים לב לזה.

     
  2. eyal.vardi

    אפריל 21, 2016 at 11:36 am

    מסכים.
    זה מתחיל להיות כמו דוט-נט, כלומר אם אתה רוצה שינויים בזמן ריצה, אתה תשלם בביצועים.
    אך לפעמים אין ברירה וחייבים לעבוד ב-reflection. מקווה שהם יעשו את זה נח ולא סגור.
    תודה על התגובה.

     
  3. שאול אלמוג

    אפריל 22, 2016 at 4:56 am

    מאוד נהנה מהפוסטים שלך באנגולר2 !
    הדברים שאתה מביא בפוסט שלך מאוד מקורים וחשובים.
    תודה רבה!

     
  4. eyal.vardi

    אפריל 22, 2016 at 9:55 am

    הי,
    עלה לי רעיון חדש לכתוב Proxy שדורס את extends ואז הוא מעתיק את ה-metadata. ברגע שיהיה לי משהוא עובד אני אפרסם. הבעיה , רוב הדפדפנים עדיין לא תומכים ב-proxy :-(.
    מאמר בנושא של ה-Proxy:
    http://www.2ality.com/2014/12/es6-proxies.html

     

להשאיר תגובה

הזינו את פרטיכם בטופס, או לחצו על אחד מהאייקונים כדי להשתמש בחשבון קיים:

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

 
%d בלוגרים אהבו את זה: