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控制台正在抛出一个错误，告诉它 模板解析错误： '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

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

<强> app.module.ts

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

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

并将其从directives的{​​{1}}属性中删除。它已被弃用。

<强> app.component.ts <击>

<击>

AppComponent

<击>

Answer 2

td已弃用。创建directives并将其添加到NgModule。

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

Answer 3

您需要在声明数组中声明 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 { }