Angular 2聚合物和PaperChechboxSelectedDirective

我想讓Ng2聚合物一起工作。爲此，我的目標是創建一些指令，這些指令可以聽取文件元素，並轉換事件或做任何需要做的事情來使角度理解用戶交互。Angular 2聚合物和PaperChechboxSelectedDirective

如果我這樣做：

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

我得到的雙向綁定與NG2工作（它的怪異，我要看看數據找到複選框的值雖然...任何指針在那個人上？）。

所以，每一件事情都可以工作，但我希望切斷儀式，並有一個指令，讓我的'酒吧'表達式，並通過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) { 

    } 
    }

來源

2016-05-18 Brett

你想在你的指令表達'bar'的價值

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

通訊plunker？ –

可以使用雙向結合是這樣做的：

@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

或者沒有指令，你可以寫一個有點簡單：這裏https://plnkr.co/edit/nVSdJGAwlXGEcHZXCOqV?p=preview

來源

2016-05-18 05:35:38 yurzui

這真是太好了謝謝你，但是這個指令並沒有考慮Angular的「bar」的更新，我的第一個案例https://plnkr.co/edit/hqUaIzsjAxcfOIeR03ak?p=preview 有沒有工作呢？ – Brett

@Brett謝謝你指出這個錯誤。我修好了它。 https://plnkr.co/edit/kwwa9SBWdPUnAVwLSZTh?p=preview並相應地更新了答案 – yurzui

真棒謝謝:)你應該更新初始響應... – Brett

Angular 2聚合物和PaperChechboxSelectedDirective

回答

相關問題