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

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

    Item 1
    Item 2

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

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

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

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

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

这是一个示例:

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

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

@Component({
  selector: 'dropdown',
  template: `
    

      
{{value.label}}
    
  `
})
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);
  }
}

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

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

编辑

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

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

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

@Component({
  selector: 'dropdown',
  template: `
    

      
{{value.label}}
    
  `
})
export class DropdownComponent {
  @Input()
  values: DropdownValue[];

  @Output()
  select: EventEmitter;

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

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

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

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