在angular2中路由下拉选项

Question

我为4选项创建了一个下拉列表作为..

我必须路由此选项，例如当我点击选项A然后它应该路由到 A.ts ，并且相同的B到B.ts C到C.ts和D到D.ts

My app.ts 
import {bootstrap}  from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {NGL_DIRECTIVES, provideNglConfig} from 'ng-lightning/ng-lightning';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';


@Component({
  selector: 'my-app',
  directives: [NGL_DIRECTIVES],
  templateUrl: 'app/angular-2-menu.html',


})
export class Angular2Menu {

 open: boolean;
  picks: any[] = [];

  items = [
    { value: 'A' },
    { value: 'B' },
    { value: 'C' },
    { value: 'D' },
  ];

  onToggle($event: Event) {
    $event.stopPropagation();
    this.open = true;
  }

}

bootstrap(Angular2Menu, [provideNglConfig()]);

和 app / angular-2-menu.html as

and my--> **app/angular-2-menu.html**


<div style="padding-left:10px;padding-top:10px">
<div class="slds-text-heading--label slds-m-bottom--small">Angular 2 Dropdown Menu</div>
<span nglDropdown [(open)]="open">
  <button class="slds-button slds-button--neutral" nglDropdownTrigger>
    <span class="slds-truncate">Select an item</span>
    <ngl-icon icon="down" size="x-small"></ngl-icon>
  </button>
  <div class="slds-dropdown slds-dropdown--left">
    <ul class="dropdown__list" role="menu">
      <li class="slds-dropdown__item" *ngFor="#item of items;">
        <a role="menuitem" nglDropdownItem (click)="selected = item.value; open = false;">
          <p class="slds-truncate">{{item.value}}</p>
          <ngl-icon [icon]="item.icon" size="x-small"></ngl-icon>
        </a>
      </li>
    </ul>
  </div>
</span>

请指导我..

Answer 1

您可以将方法绑定到点击事件

 <a role="menuitem" nglDropdownItem (click)="onAnchorClick($event)">

并在您的组件中执行此类导航：

onAnchorClick(item){
    this.selected = item.value; 
    this.open = false;
    switch(this.selected){
        case "A": 
          this.router.navigate(["/A"]);
          break;
        case "B":
          ..
    }
}

Answer 2

items = [
    { value: 'A' , url : '/A'},
    { value: 'B' , url : '/B'},
    { value: 'C' , url : '/C'},
    { value: 'D' , url : '/D'},
  ];




<a role="menuitem" nglDropdownItem  [routerLink]="['' + item.url]" (click)="selected = item.value; open = false;">
  </a>