角度/路线/查询参数/

Question

我有一个使用最新Angular编写的应用程序。我在路由方面遇到了问题。我不明白如何使用queryParams。主页上有过滤器的过滤器面板。如果将来自过滤器的值显示在URL中，那就太好了（例如，如果我想与用户共享过滤商品的链接）。如何在angular中通过URL传递过滤器的值并获取places这样的URL。 我以前从未与Angular合作过，所以，抱歉，很傻

应用程序路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainPageComponent } from './main-page/main-page.component';
import { DetailsEventPageComponent } from './details-event-page/details-event-page.component';

const routes: Routes = [
  { path: 'event-page', component: MainPageComponent},
  { path: 'event-page/:id', component: DetailsEventPageComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

角度组件

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { DataService } from '../app-services/data.service';
import { LocationModel } from '../app-models/LocationModel';
import { EventTypeModel } from '../app-models/EventTypeModel';
import { EventModel } from '../app-models/EventModel';
import { FilterModel } from '../app-models/FilterModel';
import { DateFilterModel } from '../app-models/DateFilterModel'; 


@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.less'],
  providers: [DataService],
  encapsulation: ViewEncapsulation.None
})
export class MainPageComponent implements OnInit {    

  events: EventModel[];
  locationItems: LocationModel[] = [];
  locationsSelected: LocationModel[] = [];
  typeItems: EventTypeModel[] = [];
  typesSelected: EventTypeModel[] = [];

  filter: FilterModel;
  totalPages: number;
  urlImageHeader: string;

  constructor(private dataService: DataService) {
    this.prepareDateFilterButtons();

    this.filter = {
      pageNumber: 1,
      locations: null,
      types: null
    };
  }

  ngOnInit() {
    this.loadEvents();

    this.dataService.getLocations().subscribe(data => {
      if (data) {
        this.locationItems = data;
      }
    });

    this.dataService.getTypes().subscribe(data => {
      if (data) {
        this.typeItems = data;
      }
    });

    this.dataService.getUrlImageHeader().subscribe(data => {
      this.urlImageHeader = data;
    });
  }

  onCloseMultiselect(itemsSelected, nameMultiselect) {
    switch (nameMultiselect) {
      case 'Location':
        this.filter.locations = itemsSelected;
        break;
      case 'Type':
        this.filter.types = itemsSelected;
        break;
    }
    this.loadEvents();
  }

  loadEvents() {
    this.dataService.getEvents(this.filter).subscribe(data => {
      if (data) {
        this.events = data.events;
        this.totalPages = data.totalPages;
      }
    });
  }
}

过滤： html：

<div class="filter-multiselect">
  <p-multiSelect [options]="items"
                 [(ngModel)]="itemsSelected"
                 styleClass="multiSelect"
                 [defaultLabel]="labelComponent"
                 (onPanelShow)="handlePanelShow()"
                 (onPanelHide)="handlePanelHide()"
                 (onChange)="filtersApply()"
                 panelStyleClass="panelStyleClassCustom"
                 [ngClass]="isOpen ? 'multi-select-open' : '' "
    [maxSelectedLabels]="0">
    <ng-template let-element let-i="index" pTemplate="item">
      <div class="ui-multiselect-item-text">{{element.label}}</div>
    </ng-template>
  </p-multiSelect>
</div>

角组件：

import { Component, OnInit, ViewEncapsulation, Input, ElementRef, EventEmitter, Output } from '@angular/core';
import { MultiselectBaseModel } from '../app-models/MultiselectBaseModel';

@Component({
  selector: 'app-filter-multiselect',
  templateUrl: './filter-multiselect.component.html',
  styleUrls: ['./filter-multiselect.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class FilterMultiselectComponent implements OnInit {
  @Input() labelComponent: string;
  @Input() items: MultiselectBaseModel[];
  @Input() itemsSelected: MultiselectBaseModel[];
  @Output() closeMultiselectEventHandler: EventEmitter<any> = new EventEmitter();

  isOpen = false;

  constructor(public el: ElementRef) { }

  ngOnInit() {}

  handlePanelShow() {
    this.isOpen = true;
  }

  handlePanelHide() {
    this.isOpen = false;
  }

  filtersApply() {
    this.closeMultiselectEventHandler.emit(this.itemsSelected);
  }

  handleClickMultiSelect(event) {

  }
}