Açısal2 kullanarak genişletilebilir bir açılır pencere nasıl oluşturulur?

Question

angular2 kullanarak genişletilebilir bir aşağı açılır pencere oluşturmak istiyorum. onClick tarihinde açılır menü açılır ve onBlur açılır kapanır.

Bu davranışı gerçekleştirmeyi düşünebilmemin tek yolu, durumu takip eden bir değişken tutmaktır.

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

devlet yapmak kod biraz dağınık güncellemek zorunda, genişletilebilir bir açılan ulaşmada daha iyi bir yolu var mı?

Answer 1

Bunun daha iyi/daha basit bir yolu olduğunu sanmıyorum (umarım birisi beni düzeltir :)). Ancak değişkeninizi yalnızca şablona dönüştürebilir ve updateState() yönteminden kurtulabilirsiniz.

@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

diğer bir yolu (şart değil iyi bir yol) açılır menüden için ayrı bir bileşen oluşturma ve sadece belki temizleyici (aynı mantık menüsünün durumunu değiştirmek için üzerine genel bir yöntem olan içerir ana bileşenden daha sonra kodu)

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

Ayrıca *ngIf'dan kaçınmak için bileşeni DynamicComponentLoader üzerinden yükleyebilirsiniz. Ama eğer bir şey olursa, kodu daha da karmaşık hale getirecektir.