ディレクティブとコンポーネントをグローバルに使用する方法

Question

私は、私のAngular 2アプリケーションで使用するカスタムディレクティブを、私のAngular 2アプリケーションのすべての異なるコンポーネントでコンテンツパネル（テンプレート内の一部のコンテンツホルダ）を閉じるために使用しました。このコードはコンポーネントごとに全く同じなので、一度定義してすべてのコンポーネントで使用できるディレクティブを書くことは理にかなっていると思いました。今、私はapp.component親コンポーネントに一度このディレクティブをインポートし、そして私は、すべての子コンポーネント全体でこのディレクティブを使用することができることができることを期待

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'; 
    } 
} 

：これは私のディレクティブは次のようになります。これは悲しいことにうまくいきませんので、私はこのディレクティブを各コンポーネントで個別にインポートする必要があります。私は何か間違っているのですか？または、この動作は単純に不可能ですか？

Answer 1

更新> = RC.5

は、あなたがインポートされたモジュールのコンポーネント、ディレクティブまたはパイプを使いたいどんなモジュールでモジュールをインポートする必要があります。その周りに道はない。

何ができることは、例えば（他のいくつかのモジュールをエクスポートするモジュールを作成するCommonModuleをエクスポートBrowserModuleある。

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

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

あなたはMyModuleに利用できるAllInOneModuleによってエクスポートされたすべてのものを作るこの方法です。

も参照してください。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()を含む。そこにも追加する必要はありません。