Comment créer un composant dropdown dans Angular 2?

Je veux créer un menu déroulant à l'aide Angulaire 2, mais je ne suis pas la façon de faire dans le "Angulaire 2".

Je pouvais créer une liste déroulante composant qui est utilisé comme ceci:

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

Cela semble sympa, mais alors la action méthode doit être définie sur le composant qui contient le <dropdown> et la <li> éléments à ne pas obtenir de styles appliqués dans les styles dans le <dropdown> composant, qui est une sorte de bizarre.

Une autre option est de créer des composants qui sont utilisés comme ceci:

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

C'est plus détaillé, la liste déroulante-élément composant gère le clic d'action, et les styles des éléments définis par la liste déroulante-élément.

Est-il plus canonique moyen de le faire dans Angulaire 2?

Edit: je ne parle pas d'une coutume sélectionnez une entrée dans un formulaire. Plus comme un menu avec des options, ou un clic droit menu contextuel.

source d'informationauteur Ryan

  1. 43

    Je dirais que cela dépend de ce que vous voulez faire.

    Si votre déroulante est un composant pour un formulaire qui gère un état, je voudrais tirer parti de la liaison bidirectionnelle de Angular2. Pour cela, je voudrais utiliser deux attributs: une entrée, on d'obtenir l'objet associé à une sortie un pour vous avertir lorsque les changements d'état.

    Voici un exemple:

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

    Cela vous permet de l'utiliser de cette façon:

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

    Vous pouvez construire votre déroulant au sein de la composante, appliquer des styles et gérer des sélections à l'interne.

    Modifier

    Vous pouvez remarquer que vous pouvez simplement tirer profit d'un événement personnalisé dans votre composant pour déclencher la sélection d'une liste déroulante. De sorte que le composant serait désormais être quelque chose comme ceci:

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

    Ensuite, vous pouvez utiliser le composant comme ceci:

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

    Avis que le action méthode est l'un des composant parent (et non le menu déroulant).

  2. 2

    Si vous souhaitez utiliser bootstrap des listes déroulantes, je vais recommander ce pour angular2:

    ngx-liste

  3. 0

    Cela pourrait ne pas exactement ce que vous voulez, mais j'ai utilisé jquery smartmenu(https://github.com/vadikom/smartmenus) pour construire une ng2 menu déroulant.

     $('#main-menu').smartmenus();

    http://plnkr.co/edit/wLqLUoBQYgcDwOgSoRfF?p=preview
    https://github.com/Longfld/DynamicaLoadMultiLevelDropDownMenu