Question

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

无法绑定到'isFavorite'，因为它不是已知的原生属性

这是我的代码：

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（） - ＆gt;来解决问题。 @Input('isFavorite') isFavorite = false;

方式不同但结果相同

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

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，但该值已分配给类字段isFavorite。

如果你想像

那样使用它

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

将其定义为

inputs: ['isFavorite']

或

@Input() isFavorite = false;

angular2 @input无法正常工作

方式不同但结果相同

1 个答案: