Angular2カスタムディレクティブ双方向バインディング

Question

ユーザーがドロップダウンで "All"オプションを選択すると、自動的にすべてのオプションが選択されます。カスタムディレクティブですべてのオプションを選択できるカスタムディレクティブを作成しようとしています。これは、消費コンポーネントのモデルを更新しません。

カスタム指令

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

そして、私は@Inputを作成し、モデルを試してみて、更新するためのボックス構文でバナナを使用してみましたが、テンプレート

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

、私は成功しませんでしたそれと。

@Outputを使用して、消費コンポーネントがhttps://toddmotto.com/component-events-event-emitter-output-angular-2と同様に処理できるイベントを発生させましたが、単純にモデルを自動的に更新することができます。

私は可能かどうか疑問に思っていますか？または、http://plnkr.co/edit/ORBXA59mNeaidQCLa5x2?p=previewに似たカスタムコンポーネントを作成する方が適切です。 JavaScriptで選択状態を設定し、事前

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を更新するようにトリガーするかどうかを確認してください。