angular2 @input 不工作

Question

我要将一个值传递到我的自定义组件中，但它在控制台中显示错误

Can't bind to 'isFavorite' since it isn't a known native property

这是我的代码：

favorite.component.ts

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

app.component.ts

import {Component} from 'angular2/core'
import {FavoriteComponent} from './favorite.component'

@Component({
    selector: 'my-app',
    template: `
    <favorite [isFavorite]="true"></favorite>
    `,
   directives: [FavoriteComponent]
})
export class AppComponent {}

更新： 上面的代码是实现此功能的更好方法，您可以通过将名称传递给 @input() -> @Input('isFavorite') isFavorite = false;[ 来解决问题=16=]

方式不同，结果相同

我也尝试了下面的代码，但它显示了同样的错误！

favorite.component.ts

import {Component,Input} from 'angular2/core'
@Component ({
    selector:'favorite',
    template:`
    <i class="glyphicon"
    [class.glyphicon-star-empty]="!isFavorite"
    [class.glyphicon-star]="isFavorite"
    (click)="onClick()">
    </i>
    `,
    inputs: ['isFavorite:is-favorite']
})
export class FavoriteComponent{
    @Input('is-favorite') isFavorite = false;
    onClick(){
        this.isFavorite = !this.isFavorite;
    }
}

app.component.ts

import {Component} from 'angular2/core'
import {FavoriteComponent} from './favorite.component'

@Component({
    selector: 'my-app',
    template: `
    <favorite is-favorite="true"></favorite>
    `,
   directives: [FavoriteComponent]
})
export class AppComponent {}

我的代码有什么问题？

Answer 1

仅使用 inputs: [...] 或 @Input(...) 但不能同时使用：

import {Component,Input} from 'angular2/core'
@Component ({
    selector:'favorite',
    template:`
    <i class="glyphicon"
    [class.glyphicon-star-empty]="!isFavorite"
    [class.glyphicon-star]="isFavorite"
    (click)="onClick()">
    </i>
    `,
    // inputs: ['isFavorite:is-favorite']
})
export class FavoriteComponent{
    @Input('is-favorite') isFavorite = false;
    onClick(){
        this.isFavorite = !this.isFavorite;
    }
}

错误信息来自

<favorite [isFavorite]="true"></favorite>

如果你使用

inputs: ['isFavorite:is-favorite']

或

@Input('is-favorite') isFavorite = false;

这意味着属性被命名为 is-favorite 但该值被分配给 class 字段 isFavorite.

如果你想像

那样使用它

<favorite [isFavorite]="true"></favorite>

定义为

inputs: ['isFavorite']

或

@Input() isFavorite = false;

angular2 @input 不工作

angular2 @input not working

components

angular

方式不同，结果相同