angular2を使用してエキスパンドドロップダウンを構築する方法は？

Question

angular2を使用して拡張可能なドロップダウンを作成したいとします。 onClickにドロップダウンが拡大され、onBlurドロップダウンが縮小します。

私はこの動作を達成するために考えられる唯一の方法は、状態を追跡する変数を保持することです。

@Component({ 
    selector: 'dropdown', 
    pipes: [SearchPipe], 
    template: 
    ` 
    <div (blur)=updateState(false)> 
     <input [(ngModel)]="searchText" placeholder="name" (click)="updateState(true)> 
     <li *ngIf="my_state" *ngFor="#item of items | search: searchText"> 
     <div>{{item.title}}</div> 
     </li> 
    </div> 
    ` 
}) 
export class Dropdown { 

    items = [{title: 'hello world'}, {title: 'hello 2'}, {title: 'foo bar'}]; 
    searchText = ''; 
    my_state = false; 

    updateState(show_flag) { 

     my_state = show_flag 
    } 
} 

状態を更新してコードを乱雑にすると、拡張可能なドロップダウンを実現する良い方法がありますか？

Answer 1

私はこれを達成するためのより良い/より簡単な方法はないと思います（うまくいけば誰かが私を修正するでしょう:)）。しかし、変数をテンプレートに対してローカルにするだけで、updateState()メソッドを削除することができます。

@Component({ 
    selector: 'my-app', 
    template:` 
    <div> 
     <input (blur)="my_state =false" [(ngModel)]="searchText" placeholder="name" (click)="my_state = true"> 
     <div *ngIf="my_state"> 
     <li *ngFor="#item of items">{{item.title}}</li> 
     </div> 
    </div> 
    ` 
}) 
export class AppComponent { 
    items = [{title: 'hello world'}, {title: 'hello 2'}, {title: 'foo bar'}]; 
    searchText = ''; 
} 

Plunker demonstrating both the above and below ways

代替方法（必ずしも良い方法）だけ多分クリーナー（同じロジックをドロップダウンメニューのための別個のコンポーネントを作成し、メニューの状態を変更するためにその上にパブリックメソッドを有することを含みます親コンポーネントから、コード）

@Component({ 
    selector:'dropdown', 
    template:` 
    <div *ngIf="isOpened"> 
     <li *ngFor="#item of items">{{item.title}}</li> 
    </div> 
    ` 
}) 
class DropDown{ 
    @Input('initial-state') isOpened; 
    @Input() items; 
    toggle(newState){ 
    this.isOpened = newState !== undefined ? newState: !this.isOpened: 
    } 
} 

：

<input (blur)="dropdown.toggle(false)" [(ngModel)]="searchText" (click)="dropdown.toggle(true)"> 
<dropdown #dropdown [initial-state]="true" [items]="items"></dropdown> 

*ngIfを避けるために、コンポーネントをDynamicComponentLoader経由でロードすることもできます。しかし、何かがあれば、コードが厄介になります。