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 文档 here，请注意您正在为 DOM 绑定使用 camelCasing -- 而文档显示的是连字符的用法？

而不是这个

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

试试这个

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

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

Angular2 RC1 Parent to Child data through Input Binding

typescript

angular2-template

angular