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

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

app.component.ts

~~directives: [DemoComponent] ,~~

Answer 2

directives 已弃用。创建一个 NgModule 并将其添加到 declarations 中。

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

Angular 2 个指令错误

Angular 2 directives error

angular2-directives

angular2-components

angular