创建一个下拉组件 [英] Create a dropdown component

问题描述

我想使用Angular 2创建一个下拉菜单，但是我不确定如何以"Angular 2方式"进行操作.

I want to create a dropdown menu using Angular 2, but I'm not sure 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>

这看起来不错，但是随后需要在包含<dropdown>的组件上定义action方法，并且<li>元素不会从<dropdown>组件中的样式中应用样式.有点奇怪.

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>

这比较冗长，dropdown-item组件负责处理click操作，项目的样式也由dropdown-item组件定义.

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.

在Angular 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 attributes: 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: '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);
  }
}

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

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 now be something like this:

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);
  }
}

然后，您可以像这样使用组件:

Then you can use the component like this:

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

请注意，action方法是父组件之一(而不是下拉菜单之一).

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

这篇关于创建一个下拉组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！