Angular2 RC1通过输入绑定的父子数据

Question

所以我升级到RC1后，在输入绑定方面遇到了问题。以下是我的观点：

<form class="form-inline">
    <div class="form-group">
        <select id="limitControl" class="form-control" 
                [(ngModel)]="limit" (change)="limitChanged($event)">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="0">All</option>
        </select>
        <label for="limitControl"> {{recordType}} per page</label>
    </div>
</form>

这是以下组件的视图：

@Component({
    selector: 'limiter',
    templateUrl: 'frontend/common/limiter/view.html',
    styleUrls: ['frontend/common/limiter/style.css']
})
export class LimiterComponent {
    limit: number = 10;
    @Input() recordType: string;
    @Output() limitChangedEvent = new EventEmitter<number>();
    limitChanged($event) {
        this.limitChangedEvent.emit($event.currentTarget.value);
    }
}

最后，这是由它的父级调用的：

<limiter (limitChangedEvent)="limitChanged($event)" 
         [recordType]="Campaigns"></limiter>

recordType似乎没有传递到子组件中。有人有什么想法吗？

Answer 1

你能用这种方式试试吗：

export class LimiterComponent {
        limit: number = 10;
        @Input('record-type') recordType: string;
        @Output() limitChangedEvent = new EventEmitter<number>();
        limitChanged($event) {
            this.limitChangedEvent.emit($event.currentTarget.value);
        }
    }

父组件：

<limiter (limitChangedEvent)="limitChanged($event)" 
         record-type="Campaigns"></limiter>

Answer 2

我认为这个问题与命名约定有关。查看此处的Input文档，注意到您正在为DOM绑定使用camelCasing，而文档显示的是连字符的用法？

而不是这个

<limiter (limitChangedEvent)="limitChanged($event)" 
         [recordType]="Campaigns"></limiter>

试试这个

<limiter (limitChangedEvent)="limitChanged($event)" 
         record-type="Campaigns"></limiter>