Отображение данных на основе маршрутизации на первый компонент из второго компонента - PullRequest
Новая
       40

Отображение данных на основе маршрутизации на первый компонент из второго компонента

0 голосов
/ 25 апреля 2020

В моем приложении 2 компонента: компонент фильтра и компонент карты. В компоненте фильтров я добавил метод маршрутизации для фильтрации данных на основе привязки селектора страны.

Компонент фильтров: 

import { Component, OnInit } from '@angular/core';
import { TestimonialsDataService } from '../../services/testimonials-data.service';
import { Router,  ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.scss']
})
export class FiltersComponent implements OnInit {
  public filters = [];
  public filterId;

  selectedIndex: number = null;

  constructor(private router: Router, private route: ActivatedRoute, private _testimonialsService: TestimonialsDataService) { }

  ngOnInit(): void {
    this._testimonialsService.getData().subscribe(data => this.filters = data);
    this.route.paramMap.subscribe((params: ParamMap) => {
      let id = parseInt(params.get('id'));
      this.filterId = id;
    });
  }

  onSelect(country) {
    this.router.navigate(['/country', country.id]);
  }
}
<div class="container filters">
  <p>{{filters["filtersTitle"]}}</p>

  <ul class="filter-wrap" *ngIf="filters['filtersData']">
    <li class="filter-item" *ngFor="let filter of filters['filtersData']" (click)="onSelect(filter)">
      <a id="{{filter.id}}" class="filter">
        <span class="flag flag-{{filter.id}}"></span>
        <span class="flag-text">{{filter.id}}</span>
      </a>
    </li>
  </ul>
</div>

Компонент карты: 

import { Component, OnInit } from '@angular/core';
import { TestimonialsDataService } from '../../services/testimonials-data.service';
import { Router,  ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {
  public authors: Object = {};
  public pageList: number = 1;

  constructor(private _testimonialsService: TestimonialsDataService) { }

  ngOnInit(): void {
    this._testimonialsService.getData().subscribe(data => this.authors = data);
  }
}
image

Вот что я хочу достичь: нажмите на <li class="filter-item" *ngFor="let filter of filters['filtersData']" (click)="onSelect(filter)">, URL-адрес будет выглядеть так: страна / DE или страна / IT

на компоненте карты Я хочу отобразить данные, которые соответствуют / DE или / IT на основе карты

Я загружаю все карты в начале страницы, но должен быть в состоянии их отфильтровать на основе выбора страны

Изображение: App info

1 Ответ

0 голосов
/ 26 апреля 2020

Проверьте, работает ли это. Я не запускал его сам.

Компонент карты HTML

image

Компонент карты TS 

import { Component, OnInit } from '@angular/core';
import { TestimonialsDataService } from '../../services/testimonials-data.service';
import { Router,  ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {
  public data: Object = {};
  public authors: any[] = [];
  public pageList: number = 1;

  constructor(private _testimonialsService: TestimonialsDataService) { }

  ngOnInit(): void {
    this._testimonialsService.getData().subscribe(data => this.data = data);
    this.route.paramMap.subscribe((params: ParamMap) => {
      let id = parseInt(params.get('id'));
      this.authors = this.data['user'].filter(o => o.country === id);
    });
  }
}

В компоненте фильтров вы можете удалить this.route.paramMap.subscribe деталь из ngOnInit.

...