如何导入指令组件

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

最好的方法是创建一个这样的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{}

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

Answer 2

你应该在NgModule的declarations属性下指定组件、指令和管道。所以对我来说，把angular 2升级到2.0.0是最简单的方法。版本是为应用程序定义一个模块(app.module.ts)，把所有的放在那里，然后开始分解成更小的模块。这里有一个很好的参考

Answer 3

在Angular2.0.0中内置指令可以通过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 4

正如其他人所说，你需要将你的指令和提供程序移动到你的应用程序的一个模块中。RC4到RC5的迁移指南解释了如何做到这一点，以及其他一些潜在的问题。