时间戳

首页 > 解决方案 > 如何路由 Angular 6 级联下拉列表？

angular - 如何路由 Angular 6 级联下拉列表？

问题描述

当我选择城市之后，然后选择地区显示下面的地方。我正在从数组中获取数据。

我想在一个又一个地区选择城市时添加诸如 website.com/city/down 或 website.com/city-down 之类的路由 URL。

我尝试使用 jquery 和 vue，但我不能。我能怎么做？

主页.html 

<select [(ngModel)]="selectedCity" class="province-menu">
  <option [ngValue]="null" selected>City</option>
    <option *ngFor="let cities of city" [ngValue]="cities" 
[disabled]="cities.disable">
      {{ cities.name }}
    </option>
  </select>
  <select class="district-menu" [(ngModel)]="selectedDown" >
    <option [ngValue]="null" selected>Down</option>
    <option *ngFor="let dw of selectedCity.down" [ngValue]="dw" [disabled]="dw.disable">
    {{dw.name}}
    </option>
  </select>

主页.ts

{'name':'City',
'value':1,
'down':[
  {'name':'Down',
  'value':1_1,
  'places':[
    {'name':'DownPlaces01'},
    {'name':'DownPlaces02'}  ]}]}
selectedCity = this.city[0];

  selectedDown = this.selectedCity.down[0];

 selectedPlaces = this.selectedDown.places[0];

标签： angularpathnesteddropdownrouter

解决方案

我不是 100% 确定你到底想做什么以及为什么你在 Angular 问题中提到了 Vue 和 jQuery，但这可能会有所帮助：

在您的 html 文件中，您可以将ngModelChange处理程序添加到两个下拉列表中，它看起来像这样：

<select
[(ngModel)]="selectedCity"
(ngModelChange)="onCitySelect($event)"
class="province-menu">
    <option [ngValue]="null" selected>City</option>
    <option
    *ngFor="let cities of city"
    [ngValue]="cities"
    [disabled]="cities.disable">
        {{ cities.name }}
    </option>
</select>

<select
[(ngModel)]="selectedDown"
(ngModelChange)="onDistrictSelect($event)"
class="district-menu">
    <option [ngValue]="null" selected>Down</option>
    <option
    *ngFor="let dw of selectedCity.down"
    [ngValue]="dw"
    [disabled]="dw.disable">
        {{dw.name}}
    </option>
</select>

和你的home.ts：

onCitySelect(city) {
    this.selectedCity = city;
    this.selectedDown = null;
}

onDistrictSelect(district) {
    this.selectedDown = district;
    this.router.navigateByUrl(`city/${this.selectedCity}/${this.selectedDown}`);
}

推荐阅读