如何在Angular 2中创建下拉组件？

Question

我想使用Angular 2创建一个下拉菜单,但我不知道如何在"Angular 2 way"中创建它.

我可以创建一个像这样使用的下拉组件:

<dropdown>
    <li (click)="action('item 1')">Item 1</li>
    <li (click)="action('item 2')">Item 2</li>
</dropdown>

这似乎很好,但是然后action需要在包含该组件的组件上定义该方法,<dropdown>并且<li>元素不会从<dropdown>组件中的样式中应用样式,这有点奇怪.

另一种选择是创建像这样使用的组件:

<dropdown>
    <dropdown-item (click)="action('item 1')">Item 1</dropdown-item>
    <dropdown-item (click)="action('item 2')">Item 2</dropdown-item>
<dropdown>

这更详细,dropdown-item组件处理单击操作,项目的样式也由dropdown-item组件定义.

在Angular 2中有更典型的方法吗？

编辑:我不是在谈论表单的自定义选择输入.更像是带有选项的菜单或右键单击上下文菜单.

Answer 1

我会说这取决于你想做什么.

如果您的下拉列表是管理状态的表单的组件,我将利用Angular2的双向绑定.为此,我将使用两个属性:一个用于获取关联对象的输入,另一个用于在状态更改时通知的输出.

这是一个示例:

export class DropdownValue {
  value:string;
  label:string;

  constructor(value:string,label:string) {
    this.value = value;
    this.label = label;
  }
}

@Component({
  selector: 'dropdown',
  template: `
    <ul>
      <li *ngFor="let value of values" (click)="select(value.value)">{{value.label}}</li>
    </ul>
  `
})
export class DropdownComponent {
  @Input()
  values: DropdownValue[];

  @Input()
  value: string[];

  @Output()
  valueChange: EventEmitter;

  constructor(private elementRef:ElementRef) {
    this.valueChange = new EventEmitter();
  }

  select(value) {
    this.valueChange.emit(value);
  }
}

这允许您以这种方式使用它:

<dropdown [values]="dropdownValues" [(value)]="value"></dropdown>

您可以在组件中构建下拉列表,应用样式并在内部管理选择.

编辑

您可以注意到,您可以简单地利用组件中的自定义事件来触发选择下拉列表.所以该组件现在将是这样的:

export class DropdownValue {
  value:string;
  label:string;

  constructor(value:string,label:string) {
    this.value = value;
    this.label = label;
  }
}

@Component({
  selector: 'dropdown',
  template: `
    <ul>
      <li *ngFor="let value of values" (click)="selectItem(value.value)">{{value.label}}</li>
    </ul>
  `
})
export class DropdownComponent {
  @Input()
  values: DropdownValue[];

  @Output()
  select: EventEmitter;

  constructor() {
    this.select = new EventEmitter();
  }

  selectItem(value) {
    this.select.emit(value);
  }
}

然后你可以使用这样的组件:

<dropdown [values]="dropdownValues" (select)="action($event.value)"></dropdown>

请注意,该action方法是父组件之一(而不是下拉组件).