Angular 2多个错误，例如模板解析错误，无法绑定

Question

我是AG2的新手。刚开始1天。我尝试了一些在线教程，并完全按照他们的编码，但得到错误。

directives: [favour_component]  // only this line of coding is marked RED

然后从chrome控制台，错误是

Unhandled Promise rejection: Template parse errors:Can't bind to 'isfavour' since it isn't a known property of 'favours'.

我可能知道我的编码有什么问题吗？

app.component.ts

import { Component } from '@angular/core';
import {favour_component} from './favour.component'
@Component({
  selector: 'my-app',
  template: `
          <favours [isfavour]="post.isfavour"></favours>
  `,
  directives: [favour_component]
})
export class AppComponent { 
post={
  title:"title",
  isfavour:true
}
}

favour.component.ts

import { Component, Input} from '@angular/core';
@Component({
selector: 'favours',
template: `
        <i 
        class="glyphicon"
        [class.glyphicon-star-empty]="!favour"[class.glyphicon-star]="favour" (click)="onClick()">
        </i>
`
})
export class favour_component { 
@Input() isfavour=false;
onClick(){
this.isfavour=!this.isfavour;
}
}

这是一个非常简单的教程，就像SOF标记作为最喜欢的问题（明星）。截图是他们的编码。

我搜索SOF，他们有一些类似的错误，但情况完全不同，我根本无法理解他们的编码。因此我在这里发布。

Answer 1

从rc5开始，如果你想在视图上使用任何指令或管道或其他组件，它应该在AppModule（NgModule）声明属性中声明

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, favour_component ], //Pipes, Components, Directives belongs here
  bootstrap:    [ AppComponent ]
})

export class AppModule { } 

此后，您在模板绑定更改favour到isfavour

时出错

@Component({
  selector: 'favours',
  template: `
      <i class="glyphicon"
         [class.glyphicon-star-empty]="!isfavour" 
         [class.glyphicon-star]="isfavour" 
         (click)="onClick()">{{isfavour}}
      </i>
    `
})
export class favour_component { 

 //....

}

以下是Plunkr正在行动