如何点击选中的项目然后导航到 p-dropdown 中的相应组件？

问题描述

请参阅p-dropdown 我修改了类 City，它现在多了一个属性 url。此属性表示组件的路径。

我已将下拉列表创建为

interface City {
    name: string;
    code: string;
    url:  string;
}

export class DropdownDemo {

cities: City[];

selectedCity: City;

constructor() {
    this.cities = [
        {name: 'New York',code: 'NY',url: 'app/ny'},{name: 'Rome',code: 'RM',url: 'app/rm'},{name: 'Washington DC',code: 'DC',url: 'app/dc'},{name: 'Houston',code: 'HT',url: 'app/ht'},{name: 'Paris',code: 'PR',url: 'app/pr'}
        ];
   }
}

下拉菜单位于导航栏中。 html页面：

  <div class="collapse navbar-collapse>
    <ui class="narbar-nav mr-auto">
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/ny">NY</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/rm">RM</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/dc">DC</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/ht">HT</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/pr">
                 <p-dropdown [options]="cities" [(ngModel)]="selectedCity" 
           optionLabel="name"></p-dropdown>
           </a>
         </li>
      </ui>
     </div>

下拉菜单正确显示。现在我想要的是，如果我单击下拉菜单项，它将转到相应的组件。所以我想也许我必须在某处绑定 href 或 routerLink。但我就是不知道怎么做？

更新：

如果我在 p-dropdown 元素内添加一个点击事件然后导航，代码似乎可以工作，但页面仍然在路径 api/pr 的组件上。

解决方法

你可以使用 onChange($event),

  <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" (onChange)="onChange($event)"></p-dropdown>

当你点击一个城市时，你会收到所有的数据，然后你就可以使用

router.navigate(['xxxxx']);

去你想要的页面，但首先你需要设置一个路由器！

编辑：

你需要改变这个：

<a class="nav-link" href="#" routerLink="/api/pr">
  <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-dropdown>
</a>

到

<p-dropdown [options]="cities" [(ngModel)]="selectedCity" 
           optionLabel="name" (onChange)="onChange($event)"></p-dropdown>

然后在您的 ts 文件中，您需要像这样创建一个新方法：

onChange(event) {
    console.log('event :' + event);
    console.log(event.value);
    router.navigate([event.value.url]); // something like that

}