Решить с помощью QueryParams - PullRequest
Новая
       4

Решить с помощью QueryParams

1 голос
/ 18 января 2020

Как использовать QueryParams с разрешением:

1. Нужно реализовать поиск, передавая queryParams (используя заданные параметры) по маршруту (из компонента carSearch) (exg: / cars? COMPANYNAME = 'Шкода' & launchYear = "2018" & PAGESIZE = 10 & pageNo = "1") . 2. Нужно разрешить функцию поиска и показать выбранные данные в другом компоненте (компонент carList).

Код, который я попробовал:

Компонент SearchCar: 

  searchCars() {
   const options = {
     pageNo: this.pageNo,
     pageSize: this.pageSize,
     companyName: this.companyName,
     launchYear: this.year
   }

   this.userService.searchbycategory(options);

   this.router.navigate(['/cars'], {
      queryParams: {
      pageNo: this.pageNo,
      pageSize: this.pageSize,
      companyName: this.companyName,
      launchYear: this.year
    }
   });
  }

Служба CarListResolver: 

   resolve(route: ActivatedRouteSnapshot): Observable<any> {
      console.log('Resolve CarList working');
      return this.userService.carListData;
     }

Компонент carList: 

   ngOnInit() {
     this.route.data.subscribe((data: { filteredCars: any }) => {
     console.log(data.filteredCars);
      for (let car of data.filteredCars) {
         this.carList.push(car);
      }
     });
    }

Служба пользователя: 

   carListSub: Subject<any>;
   carListData: Observable<any>;

   constructor(private http: HttpClient) {       
      this.carListSub = new Subject();
      this.carListData = this.jobListSub.asObservable();
    }

   searchCars(options) {
         console.log(options);
         const httpOptions = {
            headers: new HttpHeaders({
               'pageSize': JSON.stringify(options.pageSize),
               'pageNumber': JSON.stringify(options.pageNumber),
               'companyName': options.companyName,
               'launchYear': options.year
            })
        };
        return this.http.get(`/api/user/getsearchedCars`, httpOptions).pipe(
            map((res: ApiResponse) => {
               return res.data;
            })
        ).subscribe(
            data => {
                console.log(data);
                this.carListSub.next(data);
             }
        );
     }

Я использую: субъект и наблюдаемый в службе, как у меня есть даже добавить еще немного для поиска из компонента carList и вспомнить тот же API.

Пожалуйста, помогите мне решить вышеуказанную проблему и исправьте меня, если я делаю что-то неправильно.

Заранее спасибо .

...