如何单击所选项目然后导航到 p-dropdown 中的相应组件?
How to click to the selected item then navigate to the corresponding component in p-dropdown?
请看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
.
的组件上
你也许可以使用 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
我修改了 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
.
你也许可以使用 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
}