Angular 2 个聚合物和一个 PaperChechboxSelectedDirective

Question

我正在尝试让 Ng2 和 Polymer 一起工作。为此，我的 objective 是创建一些指令来侦听纸元素并转换事件或做任何需要做的事情以使 angular 理解用户交互。

如果我这样做：

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

我得到了与 Ng2 一起工作的双向绑定（奇怪的是我必须查看数据来找到复选框的值......那个上面的任何指针任何人？）。

所以每件事都有效，但我想减少仪式并有一个指令来获取我的 'bar' 表达式并通过 onChange 处理程序设置它。这可能吗？

paper-checkbox 指令

  @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

Angular 2 个聚合物和一个 PaperChechboxSelectedDirective

Angular 2 Polymer and a PaperChechboxSelectedDirective

checkbox

polymer

paper-elements

angular