RSS

Angular 2.0 Global Decorator

31 מרץ

 

בפוסט זה אני רוצה להראות איך אפשר לכתוב @Global Decorator שירשום לנו את ה- Component ל-Injector של האפלקציה.

import {Component, Input, ViewEncapsulation} from 'angular2/core';
import userTpl from './user.tpl.html!text'
;
import userCss from './user.css!text'
;
import {Global} from "../utils/GlobalUtil"
;
@Global()
@Component({
    selector:
'user'
,
    template : userTpl,
    styles:[userCss]
})

export class
UserCmp{
   
private _name:string
;
   
get name(){return this
._name;}
    @Input(
'bp-name'
)
   
set name(val){this
._name = val;}
}

 

ע"י ההוספה של @Global אנחנו יותר לא צריכים לעשות כלום כדי להשתמש ב- UserCmp. להלן הקוד של Global:

import {bootstrap as bp}    from 'angular2/platform/browser';
import
{
provide,
PLATFORM_DIRECTIVES,
PLATFORM_PIPES
}
from "angular2/core";

var providers:any[] = [];

function
addPipe(pipe){
providers.push(provide(PLATFORM_PIPES, {
useValue: [pipe],
multi:
true
}))
}

function
addDirective(directive){
providers.push(provide(PLATFORM_DIRECTIVES, {
useValue: [directive],
multi:
true
}))
}

function
addService(service){
providers.push(service);
}


export function
Global(){
return
(target)=>{

Reflect.getMetadata(
'annotations'
, target)
.forEach(a => {
if( a.constructor.name === 'InjectableMetadata'
){
addService(target);
}
else if (a.constructor.name === 'PipeMetadata'
){
addPipe(target);
}
else
{
addDirective(target);
}
});
return
target;
};
}


export function bootstrap(type,prvs:any
[]){
return
bp(type,providers.concat(prvs));
}

 

 

הסברים:

1. הפונקציה Global רושמת כל Component למערך שאותו אני מכניס ל-Injector של האפלקציה.

2. כדי להריץ את האפלקציה צריך להשתמש ב- bootstrap שאני כתבתי ולא של אנגולר.

 

סיכום:

עבודה בדרך זו מקלה מאוד את הדרך לארוז מספר Components לקובץ אחד, כדי להשתמש ברכיבים אלו כל מה שאתם צריכים זה לטעון את הקובץ. בפוסט הבא אני אראה איך אפשר לדרוס את @Component Decorator כדי לחסוך לאפשר config מרכזי לכל ה- Components.

 

Ng-Course:

הקורס הבא על אנגולר 2.0 מתחיל ביום רביעי ה-6 לחודש. למידע הירשמו כאן.

מודעות פרסומת
 
השארת תגובה

פורסם ע"י ב- מרץ 31, 2016 ב- Angular 2.0

 

להשאיר תגובה

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

הלוגו של WordPress.com

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

תמונת Twitter

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

תמונת Facebook

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

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

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

מתחבר ל-%s

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