基于从第二个组件到第一个组件的路由显示数据

Question

我的应用程序中有2个组件：filters-component和card-component。在过滤器组件上，我添加了一种基于国家/地区选择器锚点的数据过滤路由方法。

过滤器组件：

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);
  }
}

<div class="container">
  <div class="content">
    <div class="card" *ngFor="let author of authors['user'] | paginate: {id: 'list-pagination', itemsPerPage: 9, currentPage: pageList}">
      <div class="card-content">
        <img class="image" src="{{author.image}}"/>
        <p class="author">{{author.name}}</p>
        <p class="job">{{author.job}}</p>
        <p class="company"><a href="https://www.materahub.com/">{{author.company}}</a></p>
        <p class="country"><span class="flag flag-{{author.country}}"></span><span class="country">{{author.country}}</span></p>
      </div>
    </div>
  </div>

  <pagination-controls id="list-pagination" previousLabel="" nextLabel="" class="list-pagination" directionLinks="true" (pageChange)="pageList = $event"></pagination-controls>
</div>

基本上我想在这里实现的是：单击<li class="filter-item" *ngFor="let filter of filters['filtersData']" (click)="onSelect(filter)">，网址如下：country / DE或country / IT

在卡组件上，我要显示与基于卡的/ DE或/ IT匹配的数据

我在页面开始时加载了所有卡，但是我必须能够根据国家/地区选择器对其进行过滤

图片：

Answer 1

检查是否可行。我自己没有运行它。

Card组件HTML

<div class="container">
  <div class="content">
    <div class="card" *ngFor="let author of authors | paginate: {id: 'list-pagination', itemsPerPage: 9, currentPage: pageList}">
      <div class="card-content">
        <img class="image" src="{{author.image}}"/>
        <p class="author">{{author.name}}</p>
        <p class="job">{{author.job}}</p>
        <p class="company"><a href="https://www.materahub.com/">{{author.company}}</a></p>
        <p class="country"><span class="flag flag-{{author.country}}"></span><span class="country">{{author.country}}</span></p>
      </div>
    </div>
  </div>

  <pagination-controls id="list-pagination" previousLabel="" nextLabel="" class="list-pagination" directionLinks="true" (pageChange)="pageList = $event"></pagination-controls>
</div>

卡组件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部分。