Angular 2 Polymer und eine PaperChechboxSelectedDirective

Question

Ich versuche, Ng2 ein Polymer zusammen zu arbeiten. Zu diesem Zweck möchte ich einige Richtlinien erstellen, die den Papierelementen zuhören und die Ereignisse umwandeln oder tun, was auch immer getan werden muss, um die Benutzerinteraktionen zu verstehen.

Wenn ich dies tun:

<paper-checkbox [checked]="bar" (change)="bar = $event.target.__data__.checked"> 
    Mark all as complete 
</paper-checkbox> 

ich bidirektionale Bindung arbeiten mit Ng2 (es ist seltsam, dass ich in Daten aussehen müssen den Wert der Checkbox obwohl finden ... alle Hinweise an diesem einen?

Also alles was funktioniert, aber ich würde gerne die Zeremonien zerschneiden und eine Direktive haben, die meinen 'Bar'-Ausdruck bekommt und über den onChange Handler setzt. Ist das möglich ?

Die Papier-Checkbox Richtlinie

@Directive({selector: 'paper-checkbox'}) 
    class PaperChechboxSelectedDirective { 

    @Output() checkedChange:EventEmitter<any> = new EventEmitter(); 

    constructor(private element: ElementRef) { 
     console.log('PaperChechboxSelectedDirective'); 
    } 

    @HostListener('iron-change', ['$event']) 
    onChange(e) { 

    } 
    } 

Answer 1

Sie können mit Zwei-Wege-Bindung, dass wie dies zu tun:

@Directive({selector: 'paper-checkbox'}) 
class PaperChechboxSelectedDirective { 
    @Input() checked: boolean; 
    @Output() checkedChange:EventEmitter<any> = new EventEmitter(); 
    el: any; 
    constructor(elRef: ElementRef) { 
    this.el = elRef.nativeElement; 
    } 
    ngOnInit() { 
    this.el.checked = this.checked; 
    } 
    @HostListener('iron-change', ['$event']) 
    onChange(e) { 
    this.checkedChange.emit(this.el.checked); 
    } 
} 

und dann auf der Vorlage

<paper-checkbox [(checked)]="bar"> 
    Mark all as complete 
</paper-checkbox> 

meinen See Arbeitsbeispiel hier https://plnkr.co/edit/FzfNqxMNbVPxuwhf9Dbq?p=preview

Oder ohne Direktive können Sie ein wenig einfach schreiben:

<paper-checkbox [checked]="bar" (change)="bar = $event.target.checked"> 
    Mark all as complete 
</paper-checkbox> 

Entsprechende Plunker hier https://plnkr.co/edit/nVSdJGAwlXGEcHZXCOqV?p=preview