我收到此错误:
异常:模板解析错误:无法绑定到"ilike",因为它不是已知的本机属性(" ][ilike]="tweet.iLike"> "(: 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文件,当我舔它时,我有一个心,它变成紫色,总喜欢值增加一,当用户再次单击时,它会转换回灰色,值减少一。
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
我的完整代码链接
有两个小问题,
(i( 您尚未在 app.module.ts 中导入LikeComponent
(ii(iLike中存在错别字错误,应该是,
template: `
<like [totalLikes]="tweet.totalLikes" [iLike]="tweet.iLike">
</like>
`,
工作堆栈闪电战