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

Question

我是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 { }

以下是错误

的屏幕截图

Answer 1

RC.6

中删除了

directives属性

您应该将其移至 NgModule 装饰器的declarations属性

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

Answer 2

如果您使用 RC6 ，那么只有您应该关注

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

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

Answer 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]

我想这应该会有所帮助。

Answer 4

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

Answer 5

即使我面临着同样的问题。

please check this error image 我正在使用 angular7

我在NgModule中包含了这个HeaderComponent，即使它不起作用。  错误： 类型'{选择器的参数：字符串；指令：（typeof HomeComponent）[]; template：字符串}'不能分配给'Component'类型的参数。对象文字只能指定已知的属性，'directives'在'Component'类型中不存在 。 < / p>

import { HeaderComponent } from './components/header/header.component' 

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,HeaderComponent],                      
  bootstrap:    [ AppComponent ]

})``