typescript - 如何使用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

另一种方法(不一定是更好的方法)涉及为下拉菜单创建一个单独的组件并在其上使用一个公共(public)方法来更改菜单的状态(相同的逻辑可能只是代码更简洁)

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

您也可以通过 DynamicComponentLoader 加载组件避免 *ngIf。但如果有的话，它会使代码更加困惑。