Angular2 RC6 升级答案

【问题标题】：Angular2 RC6 upgradeAngular2 RC6 升级
【发布时间】：2016-09-02 12:40:56
【问题描述】：

将我的项目更新为RC6 后出现以下错误：

Error: Typescript found the following errors:
  app.component.ts (12, 3): Argument of type '{ moduleId: string; selector: string; templateUrl: string; styleUrls: string[]; directives: (type...' is not assignable to parameter of type 'ComponentMetadataType'.
  Object literal may only specify known properties, and 'directives' does not exist in type 'ComponentMetadataType'.

app.component.ts

import {Component, OnInit} from '@angular/core';
import {NavbarComponent} from "./shared/navbar/navbar.component";
import {ROUTER_DIRECTIVES} from "@angular/router";
import {SidebarComponent} from "./shared/sidebar/sidebar.component";
import {FooterComponent} from "./shared/footer/footer.component";

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [NavbarComponent, SidebarComponent, FooterComponent, ROUTER_DIRECTIVES]
})
export class AppComponent implements OnInit {

  ngOnInit(): any {
    return undefined;
  }

}

我花了一些时间，但我想不通。

【问题讨论】：

app.component.ts 代码

标签： angular angular2-upgrade

【解决方案1】：

Directives 和 pipes 必须在 @NgModule 中定义，如果我没看错的话。 @Component 内部的支持已被移除。

所以是的，只需将你的指令移动到 NgModule 中

目前您有：带有指令 Ac 的组件 A 和带有指令 Bc 的组件 B 并且很可能是一个 AppModule，您只需将 Ac 和 Bc 移动到 AppModule 中。是的，您必须从 @Component 声明中删除它们

这些指令将立即在您的模块中定义的组件中可用。

来自 OP 的示例变为：

app.component.ts

// imports...
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {}

app.module.ts

// imports...
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent, 
    SidebarComponent, 
    FooterComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule
  ],
  providers: [
               //MyService, MyOtherService
             ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

查看路由器文档：router documentation

【讨论】：

这是否意味着我必须从所有组件中删除指令并将其移至应用模块，或者我必须为每个组件更改模块？
您可以先将所有内容移至 app.module。稍后您可以重新组织您的应用程序以将组件/管道分成不同的模块
正确，这个东西已经在更新日志中提到了
@ulou 目前你有：带有指令 Ac 的组件 A 和带有指令 Bc 的组件 B 并且很可能是一个 AppModule，您只需将 Ac 和 Bc 移动到 AppModule 中:)。编辑了我的答案，如果有帮助，您可能想接受它，谢谢。
请举例说明这应该是什么样子！

【解决方案2】：

directives 和 pipes 必须在您的 @NgModule 自 RC6 声明中定义。从您的 @Component 装饰器中删除它们。

【讨论】：

这是否意味着我必须从所有组件中删除指令并将其移至应用程序模块，或者我必须为每个组件创建模块？
是的，他们现在进入您的@NgModule 的declarations 部分。如果你只有主应用程序模块，它会放在那里。
好的，但是如果我有超过 1 个组件，这是否意味着我必须为组件 A 和 B 创建模块，或者只需将指令导入组件 A 并以某种方式将其链接到组件 B 中？
你把它放在模块声明中，它就可以在模块的任何地方工作
对我来说很有意义。一直想知道为什么从一开始就没有这个。

【解决方案3】：

对于 Angular 2 最终版本 2.0.0.0

管道应该在 app.module.ts 文件的声明部分声明

import {KeysPipe} from './keys.pipe';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpModule ],
  declarations: [ AppComponent, LoginComponent,ArticleComponent,**KeysPipe** ],
  bootstrap:    [ AppComponent, LoginComponent,ArticleComponent ],


})

只需观察上面代码 sn-ps 中的键管实现即可。

【讨论】：