角2指令误差

Question

我使用的是最终的角2版本。我已经设置了正式网站角2快攻中提到的启动文件。在我的app.component.ts文件中，我制作了两个组件。守则如下：

    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代码)显示了错误。chrome的控制台正在抛出一个错误，告诉模板解析错误：'demo‘不是已知的元素：

​

请帮我把这个修好。谢谢

这是我的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

directives被否决了。创建一个NgModule并将其添加到declarations中。

https://angular.io/docs/ts/latest/guide/ngmodule.html

Answer 2

您需要在声明数组中声明DemoComponent，并确保从AppComponent中删除declaration:[DemoComponent]。

FYI：声明管道、组件、@ component ({})装饰符的指令元数据中的指令已被删除。这份声明已不复存在。所以你正面临着一些问题。您需要在@NgModule({})装饰器中声明管道、指令和组件。

如果有相同的文件，您需要导入它作为import { AppComponent,DemoComponent} from './app.component';

import {DemoComponent} from 'valid path';             //<<===here
OR   
import {AppComponent, DemoComponent} from './app.component';  //<<===here


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