如何创建在角2下拉成分？ [英] How do I create a dropdown component in Angular 2?

问题描述

我要创建一个使用2角一个下拉菜单，但我不如何做到这一点，在角2路。

I want to create a dropdown menu using Angular 2, but I'm not how to do it in the "Angular 2 way".

我可以创建一个用于这样一个下拉组件：

I could create a dropdown component that is used like this:

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

这看上去不错，但随后的动作方法必须包含＆LT在组件上定义的;下拉＆GT; 和＆LT;李＆GT; 元素没有得到从样式应用样式＆LT;下拉＆GT; 成分，这是一种奇怪的。

This seems nice, but then the action method needs to be defined on the component that contains the <dropdown> and the <li> elements don't get styles applied from the styles in the <dropdown> component, which is kind of odd.

另一个选择是创建用于这样的组件：

Another option is to create components that are used like this:

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

这是更冗长，下拉项组件处理单击操作，项目的风格得到了下拉菜单项组件定义也是如此。

This is more verbose, the dropdown-item component handles the click action, and the styles of the items get defined by the dropdown-item component as well.

有没有更规范的方式角2这样做吗？

Is there a more canonical way to do this in Angular 2?

编辑：我不是在谈论一个表单自定义选择输入。更像选项菜单或右键单击上下文菜单。

I'm not talking about a custom select input for a form. More like a menu with options, or a right click context menu.

推荐答案

我会说，这取决于你想要做什么。

I would say that it depends on what you want to do.

如果您的下拉是为管理的状态的形式的组分，我想利用双向Angular2的结合。对于这一点，我会使用两个属性：输入一个拿到相关的对象，并输出一个状态更改时通知

If your dropdown is a component for a form that manages a state, I would leverage the two-way binding of Angular2. For this, I would use two attribute: an input one to get the associated object and an output one to notify when the state changes.

下面是一个例子：

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

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

@Component({
  selector: 'tags',
  template: `
    <ul>
      <li *ngFor="#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);
  }
}

这可以让你用这种方式：

This allows you to use it this way:

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

您可以在组件内内部建立自己的下拉列表中，应用样式和管理的选择。

You can build your dropdown within the component, apply styles and manage selections internally.

修改

您可以看到，您可以简单地在你的组件利用一个自定义事件来触发一个下拉的选择。因此，该组件是现在这样的事情：

You can notice that you can either simply leverage a custom event in your component to trigger the selection of a dropdown. So the component would be now something like that:

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

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

@Component({
  selector: 'tags',
  template: `
    <ul>
      <li *ngFor="#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);
  }
}

然后就可以使用该组件是这样的：

Then you can use the component like this:

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

请注意，动作方法是父组件（不是下拉之一）。一个

Notice that the action method is one of the parent component (not the dropdown one).

希望它可以帮助你，
蒂埃里

Hope it helps you, Thierry

这篇关于如何创建在角2下拉成分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！