Angular2组件如何导入指令组件？

Question

我刚刚升级到 angular2 最终版本，与 rc4 相比有很多重大变化。其中之一是组件上不再有指令集合......我曾经做过这样的事情：

@Component({
    selector: 'resource-tab',
    templateUrl: './app/applicationMgmt/resource/resource-tab.html',
    directives: [
        NgSwitch,
        NgSwitchCase,
        NgSwitchDefault,
        OtherResourceEditorComponent,
        MvcResourceEditorComponent,
        WcfResourceEditorComponent,
        WebResourceEditorComponent,
        WebApiResourceEditorComponent,
        ConfigResourceEditorComponent
    ]    
})

引用在视图模板上用作指令的其他组件...现在如何做到这一点？

Answer 1

在 Angular2.0.0 中 内置指令 是 accessible/available 和 BrowserModule。您只需按如下所示导入它，您就可以大多数内置指令。

对于 customDirective，您需要使用 声明元数据 声明它们，如图所示，

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

   /*---------import all custom directives-----------*/

   import { OtherResourceEditorComponent} from 'valid path';
   import { MvcResourceEditorComponent } from 'valid path';
   ...
   ...   

    @NgModule({
      imports:      [ BrowserModule],
      declarations: [ AppComponent,OtherResourceEditorComponent,MvcResourceEditorComponent,... ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

Answer 2

您应该在 NgModule 的声明属性下指定组件、指令和管道。所以基本上是我将 angular 2 项目升级到 2.0.0 的最简单方法。版本正在为应用程序定义一个模块 (app.module.ts) 将所有模块放在那里，然后开始将其分解为更小的模块。可以找到很好的参考 here

Answer 3

最好的方法是创建一个像这样的 ResourceEditorModule：

@NgModule({
    declarations:[
            OtherResourceEditorComponent,
            MvcResourceEditorComponent,
            WcfResourceEditorComponent,
            WebResourceEditorComponent,
            WebApiResourceEditorComponent,
            ConfigResourceEditorComponent
    ],
    exports:[
            OtherResourceEditorComponent,
            MvcResourceEditorComponent,
            WcfResourceEditorComponent,
            WebResourceEditorComponent,
            WebApiResourceEditorComponent,
            ConfigResourceEditorComponent
    ]
})
export class ResourceEditorModule{}

并在您的 AppModule:

中添加 ResourceEditorModule 作为导入

@NgModule({
    imports:[
        ...
        ...
        ResourceEditorModule
    ],
    ...
    ...
    ...
})
export class AppModule{}

背后模块的想法是将您的组件、指令、管道和服务分成属于同一个 "package" 的组，就像您需要为 HttpModule 使用 http 所需的一切一样使用 FormsModule

的表格

Answer 4

正如其他人所说，您需要将指令和提供程序移至应用的模块中。 RC4 to RC5 migration guide 解释了如何执行此操作以及其他一些潜在问题。

Angular2组件如何导入指令组件？

Angular2 Component How to Import Directive Component?

angular2-components

angular