Angular2 사용자 지정 지침 양방향 바인딩

Question

사용자가 드롭 다운에서 "모두"옵션을 선택하면 자동으로 모든 옵션이 선택됩니다. 모든 옵션을 선택하는 사용자 지정 지시문을 가져올 수있었습니다. 그러나 이것은 소비 구성 요소의 모델을 업데이트하지 않습니다.

사용자 지침

@Directive({ selector: '[selectAll]' }) 
export class SelectAllDirective { 
    private selectElement: any; 
    private selectedItemsd:number[]; 

constructor(private el: ElementRef) { 
    this.selectElement = el.nativeElement; 
} 

@HostListener('change') 
onChange() { 

    if (this.selectElement.options[0].selected) { 
     for (let i = 0; i < this.selectElement.options.length; i++) { 
      this.selectElement.options[i].selected = true; 
     } 
    } 
} 
} 

그리고

<select selectAll multiple 
           ngControl="shoreLocation" 
           #shoreLocation="ngModel" 
           id="shoreLocation" 
           [(ngModel)]="customTask.shoreLocations" 
           name="shoreLocation" 
           class="form-control multi-select" 
           required 
           style="height:150px"> 

은 내가 @Input 작성하고 시도하고 모델을 업데이트 상자 구문에 바나나를 사용하여 시도 템플릿, 나는 성공적인 아니었다 그것으로.

@Output을 사용하여 소비 구성 요소가 https://toddmotto.com/component-events-event-emitter-output-angular-2과 비슷하게 처리 할 수 ​​있지만 단순히 모델을 자동으로 업데이트 할 수 있으면 좋을 것입니다.

가능한지 궁금합니다. 또는 http://plnkr.co/edit/ORBXA59mNeaidQCLa5x2?p=preview과 비슷한 사용자 지정 구성 요소를 만드는 것이 더 좋습니다. 자바 스크립트에서 선택된 상태를 설정 사전

Answer 1

에서

덕분에 (이 직접 아이 옵션에 액세스 할 수 있지만, 확실하지가 아마 때문에) 구성 요소 선택에서 "변경"이벤트를 보내지 않습니다. 다음을 수행하여 변경된 이벤트를 직접 실행 해보십시오.

if (this.selectElement.options[0].selected) { 
    for (let i = 0; i < this.selectElement.options.length; i++) { 
     this.selectElement.options[i].selected = true; 
    } 
    //These are the two new lines 
    let changeEvent = new Event("change", {"bubbles":true, "cancelable": false}); 
    this.selectElement.dispatchEvent(changeEvent); 
} 

그리고 ngModel이 업데이트되도록 트리거하는지 확인하십시오.