如何在Angular 2中创建一个数组或一组指令

问题描述 投票:2回答:2

我目前有一个带有Component和Directive的模块,它支持我的Angular 2应用程序中的Component。要让用户使用此组件,他们必须同时导入组件和指令。有没有办法可以将它们组合成像ROUTER_DIRECTIVES这样的东西

例如:

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
}

要使用此功能,用户必须像这样导入:

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

我想知道我是否可以将DropdownDropdownToggle组合成像ROUTER_DIRECTIVES这样的数组

angular
2个回答
5
投票

qazxsw poi被宣布为

ROUTER_PROVIDERS

您可以使用自己的指令执行相同的操作

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

并使用它

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

您还可以创建指令组(或提供程序)组。 Angular扩展嵌套数组本身(不需要使用import {DROPDOWN_DIRECTIVES} from 'somedir/somefile'; @Component({ moduleId: module.id, directives: [DROPDOWN_DIRECTIVES,ROUTER_DIRECTIVES], templateUrl: "./dropdown-sample.html" }) export class DropdownAngularDemo { } )。

spread operator

2
投票

您只需要导入指令并导出对指令进行分组的常量:

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

使用:

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

export const DROPDOWN_DIRECTIVES: any[] = [Dropdown, DropdownToggle]
© www.soinside.com 2019 - 2024. All rights reserved.