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>

您还可以通过DynamicComponentLoader加载组件，以避免*ngIf。但如果有的话，它会使代码变得更加混乱。

如何使用angular2构建可扩展的下拉列表？

1 个答案: