Thành phần Angular2 @Input hai cách ràng buộc

Question

Tôi có một ứng dụng Góc điều khiển dữ liệu. Tôi có một thành phần chuyển đổi mà tôi vượt qua trong một trạng thái toggled. Vấn đề của tôi là hai cách ràng buộc dữ liệu dường như không hoạt động trừ khi tôi vượt qua trong boolean chuyển đổi như một đối tượng. Có cách nào để có được điều này để làm việc mà không cần sử dụng một EventEmitter hoặc đi qua các biến trong như một đối tượng. Đây là một thành phần có thể tái sử dụng và ứng dụng được truyền dữ liệu rất nhiều để chuyển giá trị vào như một đối tượng không phải là một tùy chọn. Mã của tôi là ....

toggle.html

<input type="checkbox" [(ngModel)]="toggled" [id]="toggleId" name="check"/> 

toggle.component.ts

import { Component, Input, EventEmitter, Output } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'toggle-switch', 
    templateUrl: 'toggle-switch.component.html', 
    styleUrls: ['toggle-switch.component.css'] 
}) 

export class ToggleSwitchComponent { 

    @Input() toggleId: string; 
    @Input() toggled: boolean; 

} 

parent.component.html

<toggle-switch toggleId="toggle-1" [(toggled)]="nongenericObject.toggled"></toggle-switch> 

Answer 1

Đối [(toggled)]="..." để làm việc bạn cần

@Input() toggled: boolean; 
    @Output() toggledChange: EventEmitter<boolean> = new EventEmitter<boolean>(); 

    changeValue() { 
    this.toggled = !toggled; 
    this.toggledChange.emit(this.toggled); 
    } 

Xem thêm Two-way binding