在angular2中路由下拉选项

我已经为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作为

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>

和我的-->**app/angular-2-menu.html**
角度2下拉菜单
选择一个项目


{{item.value}

---

请用这个来指导我

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

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

项目=[
{value:'A'，url:'/A'}，
{value:'B'，url:'/B'}，
{value:'C'，url:'/C'}，
{value:'D'，url:'/D'}，
];

您应该按照“echonax”的说法，但替换（单击）事件以（onChange）检查它在angular2上的工作方式。能否请您提供一个plunker示例，以便我能理解这一点…将错误显示为…异常：模板解析错误：意外的结束标记“a”（“ncate”>{item.value}}

[错误->]

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

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>