将app.component.ts文件中的iLike元素绑定到like.component.ts时无法绑定错误

Question

我收到错误：

EXCEPTION：模板解析错误： 无法绑定到'ilike'，因为它不是一个已知的本地财产（“     ] [ILIKE] = “tweet.iLike” ＆GT;                      “）：AppComponent @ 1：42

import {Component, Input} from 'angular2/core';

@Component({
selector: 'like',
template: `
<i
   class="glyphicon glyphicon-heart" 
   [class.highlighted]="iLike"
   (click)="onClick()">
</i>
<span>{{ totalLikes }}</span>
`,
styles: [`
    .glyphicon-heart {
        color: #ccc;
        cursor: pointer;
    }

    .highlighted {
        color: deeppink;
    }   
`]
})
   export class LikeComponent {
    @Input() totalLikes = 0;
    @Input() iLike = false;

    onClick(){
      this.iLike = !this.iLike;
      this.totalLikes += this.iLike ? 1 : -1;
    }
 }

上面的代码是我的 like.component.ts 文件，其中我有一颗心，当它舔时它会变紫并且 totalLikes值< / strong>增加1，当用户再次点击时，它会转换回灰色，值减1。

import {Component} from 'angular2/core'; // this is component decorator
import {LikeComponent} from './like.component'

@Component({
selector: 'my-app',
template: `
<like [totalLikes]="tweet.totalLikes" [ilike]="tweet.iLike">
</like>
            `,
 directives: [LikeComponent]
})

export class AppComponent {
    tweet={
      totalLikes: 10,
      iLike: false
    }
}

以上是我的喜欢.component.ts

My Full Code Link

Answer 1

有两个小问题，

（i）您尚未在app.module.ts中导入 LikeComponent

（ii）iLike中存在拼写错误，应该是，

  template: `
    <like [totalLikes]="tweet.totalLikes" [iLike]="tweet.iLike">
    </like>
            `,

<强> WORKING STACKBLITZ