Angular 2 聚合物和 PaperChechboxSelectedDirective

Question

我正在尝试让 Ng2 与聚合物一起工作。为此，我的目标是创建一些指令来监听纸张元素并转换事件或做任何需要做的事情来让角度理解用户交互。

如果我这样做：

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

我得到了使用 Ng2 的双向绑定（奇怪的是，我必须查看 data 才能找到复选框的值......任何关于那个人的指针？）。

所以一切正常，但我想减少仪式并有一个指令来获取我的“bar”表达式并通过 onChange 处理程序设置它。这可能吗？

纸张复选框指令

  @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

您可以像这样使用双向绑定：

@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);
  }
}

然后在你的模板上

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

在这里查看我的工作示例https://plnkr.co/edit/FzfNqxMNbVPxuwhf9Dbq?p=preview

或者不用指令你可以写得简单一点：

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

对应的plunker在这里https://plnkr.co/edit/nVSdJGAwlXGEcHZXCOqV?p=preview