Angular 2指令错误

Question

我使用的是 Angular 2 的最终发布版本。我已经设置了官方网站中提到的启动文件 angular 2 quickstart .在我的 app.component.ts 文件中，我制作了 2 个组件。代码如下所示:-

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

@Component({
    selector: 'demo',
    template:`
        <h2>Hi, demo !!</h2>
    `
})

export class DemoComponent implements OnInit{
    constructor(){}

    ngOnInit(){

    }
}

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1> 
    <demo></demo>
    `

})
export class AppComponent implements OnInit{ 
    constructor(){}
    ngOnInit(){

    }
}

在 my-app 的组件中，我使用了指令选择器，它是一个数组。但是编辑器(VS Code)显示错误。 chrome 的控制台抛出错误，告诉模板解析错误:“演示”不是已知元素:

请帮我解决这个问题。谢谢

这是我的app.module.ts 文件

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, DemoComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您必须在 declarations 中定义您的组件模块的属性。

app.module.ts

import { AppComponent, DemoComponent  }   from './app.component';

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

并将其从 directives 中删除AppComponent的属性(property).它已被弃用。

app.component.ts<罢工>

<罢工>

 directives: [DemoComponent] ,

<罢工>