Angular2 Component @Input dwukierunkowe wiążące

Question

Posiadam aplikację Angular opartą na danych. Mam element przełączania, który przekazuję w stanie włączonym. Mój problem polega na tym, że dwukierunkowe powiązanie danych wydaje się nie działać, chyba że przekazałem w toggle boolean jako obiekt. Czy istnieje sposób, aby to zadziałało bez korzystania z EventEmitter lub przekazywania zmiennej jako obiektu. Ma to być składnik wielokrotnego użytku, a aplikacja jest silnie napędzana danymi, więc przekazywanie wartości jako obiektu nie jest opcją. Mój kod jest ....

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

Dla [(toggled)]="..." pracować cię potrzebujesz:

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

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

Zobacz także Two-way binding