アングル2の配列またはグループの作成方法

Question

現在、私のAngular 2アプリでコンポーネントをサポートするモジュールとディレクティブがあります。ユーザーがこのコンポーネントを使用するには、コンポーネントとディレクティブの両方をインポートする必要があります。私があれば知りたい

@Component({ 
    moduleId: module.id, 
    directives: [Dropdown,DropdownToggle,ROUTER_DIRECTIVES], 
    templateUrl: "./dropdown-sample.html" 
}) 
export class DropdownAngularDemo { 
} 

：ユーザーは次のようにインポートする必要があり、これを使用するには

import {Component, HostListener, Directive} from "angular2/core"; 

@Component({ 
    selector: "my-dropdown", 
    templateUrl: "./dropdown.html", 
    styleUrls: ["./dropdown.css"] 
}) 
export class Dropdown { 
    //code 
} 

@Directive({ 
    selector: ".my-dropdown-toggle" 
}) 
export class DropdownToggle{ 

    //code 
} 

：私ができるなどのためにROUTER_DIRECTIVES

のようなものにグループ化して方法はありますDropdownとDropdownToggleをアレイにまとめることができます。ROUTER_DIRECTIVES

Answer 1

ROUTER_PROVIDERSは、あなた自身のディレクティブ

export const DROPDOWN_DIRECTIVES: any[] = CONST_EXPR([ 
    Dropdown, 
    DropdownToggle 
]); 

と同じことを行うと、あなたはまた、ディレクティブのグループのグループを作成することができます

import {DROPDOWN_DIRECTIVES} from 'somedir/somefile'; 

@Component({ 
    moduleId: module.id, 
    directives: [DROPDOWN_DIRECTIVES,ROUTER_DIRECTIVES], 
    templateUrl: "./dropdown-sample.html" 
}) 
export class DropdownAngularDemo { 
} 

のようにそれを使用することができます

export const ROUTER_PROVIDERS: any[] = CONST_EXPR([ 
    ROUTER_PROVIDERS_COMMON, 
    CONST_EXPR(new Provider(PlatformLocation, {useClass: BrowserPlatformLocation})), 
]); 

としてdelcared（またはされプロバイダ）。 Angularはネストされた配列自体を展開します（ spread operatorを使用する必要はありません）。

export const MY_DIRECTIVES: any[] = CONST_EXPR([ 
    DROPDOWN_DIRECTIVES, 
    ModalDialog, 
    MainMenu 
]); 

あなただけのグループディレクティブはという定数をあなたのディレクティブをインポートし、エクスポートする必要があり

Answer 2

：

import {Dropdown, DropdownToggle} from 'dropdow.component'; 

export const DROPDOWN_DIRECTIVES: any[] = [Dropdown, DropdownToggle] 

使用する：

import {DROPDOWN_DIRECTIVES} from 'dir/file'; 

@Component({ 
    moduleId: module.id, 
    directives: [DROPDOWN_DIRECTIVES], 
    templateUrl: "./app.html" 
}) 
export class AppComponent{ 
    //code 
}