如何在angular4的下拉菜单中进行路由？

Question

基于“品牌”和“产品”两个下拉菜单，如何路由到组件和显示项目。

像下拉列表1包含-惠普，三星等 dropdown2包含-电视，冰箱，收音机等

如果要进行导航，则类似于-从下拉列表1中选择“ HP”，从下拉列表2中选择“笔记本电脑”，然后单击“提交”按钮

addressbar(url) should look like- /ListPage?BrandName=HP&ProductType=Laptop

或者，对于“单个”下拉列表选择：-

addressbar(url) should look like- /ListPage?ProductType=Tv

或者

addressbar(url) should look like- /ListPage?BrandName=HP

filter.component.html

    <div class="col-xs-2">
      <angular2-multiselect *ngIf="dropdownList" [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings" (onSelect)="onItemSelect($event,'brand')"
        (onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)">
      </angular2-multiselect>
    </div>
    <div class="col-xs-2">
      <angular2-multiselect  *ngIf="dropdownList1" [data]="dropdownList1" [(ngModel)]="selectedItems1" [settings]="dropdownSettings1" (onSelect)="onItemSelect($event,'product')"
        (onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)">
      </angular2-multiselect>
    </div>

<div class="col-xs-2 filterControls">
    <button  type="button" (click)="getFilters()" label="Done" class="ui-button-success" icon="fa-check" style="height: 28px;margin: 5px;border-radius: 3px;">Submit</button>
    <button  type="button" (click)="resetFilters()" label="Reset" class="ui-button-danger" icon="fa-refresh" style="height: 28px;margin: 5px;border-radius: 3px;">Reset</button>
  </div>

filter.component.ts

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html'
})
  getFilters() {
alert(this.selectedItems); //item selcteddropdown{"id":"2","listName":"Samsung"}
    console.log(this.selectedItems1)
    this.router.navigate( []);  <------ how to Navigate
  }

Dashboard.component.html

<app-filter></app-filter>
<router-outlet></router-outlet>

dashboard.routing.ts

const routes: Routes = [
  { 
    path: '', 
    component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'displaydefault', pathMatch: 'full'},
        {  path: 'displaydefault', component: displayComponent},
   {  path: 'displaySelection', component: displaySelectedComponent} <--- logic 
    ]
  }
];

Answer 1

您必须使用查询参数。像这样：

getFilters() {
  const BrandName = this.selectedItems.listName;
  const ProductType = this.selectedItems.listName;

  const queryParams = {
    BrandName,
    ProductType
  }

  this.router.navigate([], { queryParams });
}

Answer 2

您可以在模板中使用路由器：

<a
 [routerLink]="'/ListPage'"
 [queryParams]="myParamsObject"
>

或者您将路由器注入您的组件并在代码中使用它：

  this.router.navigate(['login'], { queryParams: { returnUrl: returnUrl } });