如何选择链接后,我们如何制作角度2多重下拉选项

时间:2018-04-02 06:36:46

标签: angular angular2-forms

我们如何在选择链接后制作有角度的2多重下拉选项。选择下拉列表后,下拉列表中的特定选择应该表现为链接。

我使用了角度2多选。

1 个答案:

答案 0 :(得分:0)

您可以在视图中使用以下代码:

<div class="row">
  <div class="col-xs-12">
    <div class="btn-group" appDropdown>
      <button type="button" class="btn btn-primary dropdown-toggle">
      Manage Data <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a  style="cursor:pointer" (click)="OnLink1()">Link 1</a></li>
      <li><a style="cursor:pointer;" [routerLink]="['edit']" >Link 2</a></li>
      <li><a style="cursor:pointer;" (click) ="OnLink3()">Link 3</a></li>
    </ul>
    </div>
  </div>
</div>

并创建以下指令:

import { Directive, HostBinding,HostListener } from '@angular/core';

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {

  @HostBinding('class.open') isOpen = false;

  constructor() { }

  @HostListener('click') toggleOpen(eventData: Event){
    this.isOpen = !this.isOpen;
  }

}