角 2 |指令类型“{}”的参数不可分配给答案

【问题标题】：Angular 2 | Directives Argument of type '{}' is not assignable to角 2 |指令类型“{}”的参数不可分配给
【发布时间】：2017-01-20 03:09:01
【问题描述】：

我是 Angular 2 的菜鸟。我正在做 YouTube 教程，但每个教程都有 directives: 部分，我被卡住了。

app.component.ts

import { Component } from '@angular/core';
import { HeaderComponent } from './components/header/header.component'
@Component({
  selector: 'my-app',
  template: '<h1>Hello</h1><header></header>',
  directives: [HeaderComponent]
})
export class AppComponent { }

错误输出为：

Argument of type '{ selector: string; template: string; directives: typeof HeaderComponent[]; }' is not assignable to parameter of type 'ComponentMetadataType'.at line 6 col 3

header.component.ts

import { Component } from '@angular/core';

@Component ({

  selector: 'header',
  template: '<h2>hit!</h2>'

})
export class HeaderComponent { }

这是错误的截图

【问题讨论】：

什么版本的角度？
您使用的是哪个版本的 angular2？

标签： angular

【解决方案1】：

WebStorm 告诉我要保护构造函数。所以我做了。在 webpack 重新启动时导致此问题。再次删除受保护的关键字即可修复它。

【讨论】：

【解决方案2】：

directives 属性已在 RC.6

中删除

你应该把它移到你的 NgModule 装饰器的declarations 属性

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, HeaderComponent ], <== here
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

【讨论】：

所以这对我有用。这是否意味着现在所有组件都需要在 AppModule 中列出？如果我必须在全局级别列出每个模块，这似乎不是很模块化
@TommieJones 您可以将组件拆分为功能模块，然后将它们导入任何您想要的地方
为我工作。谢谢。
另外，请记住导入组件类，请注意这将是包含所有依赖项的方式，不仅包括组件，还包括管道等。
这根本不是模块化的。我讨厌角度的一件事

【解决方案3】：

如果您是angular2 的新手，这是一个非常常见的问题，而这个答案可能适用于那些遇到类似问题的人。

首先，别忘了在你的根组件(app.component.ts)中导入子组件类（这里是HeadComponent），如下：-

//inside app.component.ts
import{ HeadComponent} from'./components/header/header.component';

那么你应该把它移到app.module.ts中的声明如下：-

import{ TutorialsComponent} from'./components/header/header.component';
@NgModule({
    declarations: [
       AppComponent,HeadComponent]

我想这应该会有所帮助。

【讨论】：

【解决方案4】：

如果您使用的是RC6，那么只有您应该执行以下操作，

import { HeaderComponent } from './components/header/header.component' //<----added this line

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,HeaderComponent],                       //<----added HeaderComponent
  bootstrap:    [ AppComponent ]
})

【讨论】：

我如何知道我是否在使用 RC6？
什么是RC6，为什么在回复问题时使用缩写？