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

Question

请看p-dropdown 我修改了 class 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.

的组件上

Answer 1

你也许可以使用 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

}

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

How to click to the selected item then navigate to the corresponding component in p-dropdown?

angular

primeng

primeng-dropdowns