通过输入绑定的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，请注意您使用camelCasing 进行DOM 绑定——而文档显示了使用连字符代替？

不是这个

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

试试这个

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