Question

我刚升级到angular2最终版本，rc4有很多重大变化。其中一个是组件上不再有Directives集合......我应该做这样的事情：

@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{}

并在ResourceEditorModule中添加AppModule作为导入：

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

模块背后的想法是将组件，指令，管道和服务拆分为属于同一个＆＃34;包＆＃34;的组，就像你需要使用http HttpModule的所有内容一样需要使用FormsModule

的表单

Answer 2

您应该在NgModule的声明属性下指定组件，指令和管道。所以基本上最简单的方法是将我的角度2项目升级到2.0.0。版本为应用程序（app.module.ts）定义了一个模块，然后开始打破它的小模块。可以找到here

的良好参考

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 to RC5 migration guide解释了如何执行此操作以及其他一些潜在问题。

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

4 个答案: