angular - निर्देश और घटकों को विश्व स्तर पर कैसे उपलब्ध कराया जाए



angular2-directives (1)

मैंने एक कस्टम निर्देश लिखा है कि मैं अपने कोणीय 2 अनुप्रयोग के सभी अलग-अलग घटकों में सामग्री पैनलों (मेरे टेम्पलेट में कुछ सामग्री धारकों) को बंद करने के लिए अपने कोणीय 2 अनुप्रयोग में उपयोग करता हूं। चूंकि यह कोड प्रत्येक घटक के लिए काफी समान है, मैंने सोचा कि मैं एक निर्देश लिखने के लिए समझदारी बनाऊंगा जिसे मैं एक बार परिभाषित कर सकता हूं, और सभी घटकों में उपयोग कर सकता हूं। यह मेरा निर्देशन जैसा है:

import { Directive, ElementRef, HostListener, Injectable } from '@angular/core';

@Directive({
    selector: '[myCloseContentPanel]'
})

export class CloseContentPanelDirective {
    private el: HTMLElement;

    constructor(el: ElementRef) {
        this.el = el.nativeElement;
    }

    @HostListener('click') onMouseClick() {
        this.el.style.display = 'none';
    }
}

अब मुझे उम्मीद थी कि मैं इस निर्देश को एक बार app.component पैरेंट घटक में आयात कर सकता हूं, और मैं इस निर्देश का सभी बाल घटकों में उपयोग कर सकता हूं। यह दुख की बात नहीं है, इसलिए मुझे प्रत्येक घटक में इस निर्देश को अलग से आयात करना होगा। क्या मुझसे कुछ ग़लत हो रहा है? या यह व्यवहार बस संभव नहीं है?


अद्यतन> = RC.5

आपको आयात किए गए मॉड्यूल के घटकों, निर्देशों या पाइप का उपयोग करने के लिए जो भी मॉड्यूल चाहिए, उसमें आपको एक मॉड्यूल आयात करना होगा। इसके आसपास कोई रास्ता नहीं है।

आप क्या कर सकते हैं एक मॉड्यूल बनाने के लिए जो कई अन्य मॉड्यूल निर्यात करता है (उदाहरण के लिए, BrowserModule जो CommonModule निर्यात CommonModule

@NgModule({
  declarations: [CoolComponent, CoolDirective, CoolPipe],
  imports: [MySharedModule1, MySharedModule2],
  exports: [MySharedModule1, MySharedModule2, CoolComponent, CoolDirective, CoolPipe],
})
export class AllInOneModule {}

@NgModule({
  imports: [AllInOneModule]
})
class MyModule {}

इस तरह आप AllInOneModule द्वारा निर्यात की गई हर चीज को MyModule को उपलब्ध MyModule

https://angular.io/docs/ts/latest/guide/ngmodule.html भी https://angular.io/docs/ts/latest/guide/ngmodule.html

अद्यतन <= RC.5

bootstrap(AppComponent, [provide(PLATFORM_DIRECTIVES, {useValue: [CloseContentPanelDirective], multi: true})]);

नीचे टिप्पणी देखें - भले ही रूट घटक में प्रति शैली गाइड providers को boostrap() काम करना चाहिए:

मूल

मूल घटक पर जोड़ें

@Component({
  selector: 'my-app',
  providers: [provide(PLATFORM_DIRECTIVES, {useValue: [CloseContentPanelDirective], multi: true})],
  templat: `...`
})
export component AppComponent {
}

@Component() , @Directive() , @Pipe() पहले से ही @Injectable() शामिल करने @Injectable() । इसे वहां भी जोड़ने की जरूरत नहीं है।





angular2-directives