如何向router-outlet内的所有子组件传递公共筛选参数？

嘿，我来帮你搞定这个需求！你已经实现了父组件通过路由加载News/Video/Audio组件，现在要让这些子组件加载时自动应用父组件的复选框筛选器，这里有两种实用的方案，你可以根据场景选择：

方案一：用共享服务实现状态同步（推荐） #

这是Angular中跨路由组件共享状态的最佳实践之一，适合不需要在URL中暴露筛选条件的场景。

1. 创建筛选器共享服务 #

先写一个服务来保存筛选状态，并且提供订阅机制，让父组件更新筛选器时，子组件能实时收到通知：

// filter.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FilterService {
  // 用BehaviorSubject保存筛选状态，初始值可按需设置
  private filterState$ = new BehaviorSubject<{[key: string]: boolean}>({});

  // 对外暴露可订阅的Observable，避免外部直接修改状态
  get filterState() {
    return this.filterState$.asObservable();
  }

  // 更新筛选状态的方法
  updateFilterState(newState: {[key: string]: boolean}) {
    this.filterState$.next({...newState});
  }
}

2. 父组件中绑定筛选器并更新服务状态 #

在父组件里注入这个服务，当复选框变化时，把最新的筛选状态同步到服务中：

// parent.component.ts
import { Component } from '@angular/core';
import { FilterService } from './filter.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 定义筛选器的初始状态
  filters = {
    showLatest: false,
    showPopular: false,
    showTrending: false
  };

  constructor(private filterService: FilterService) {}

  // 复选框变化时触发的方法
  onFilterChange() {
    this.filterService.updateFilterState({...this.filters});
  }
}

父组件的HTML部分，绑定复选框和路由链接：

<!-- parent.component.html -->
<div class="filter-container">
  <label>
    <input type="checkbox" [(ngModel)]="filters.showLatest" (change)="onFilterChange()">
    显示最新内容
  </label>
  <label>
    <input type="checkbox" [(ngModel)]="filters.showPopular" (change)="onFilterChange()">
    显示热门内容
  </label>
  <label>
    <input type="checkbox" [(ngModel)]="filters.showTrending" (change)="onFilterChange()">
    显示趋势内容
  </label>
</div>

<nav class="route-links">
  <a routerLink="news">新闻</a>
  <a routerLink="video">视频</a>
  <a routerLink="audio">音频</a>
</nav>

<!-- 子组件加载区域 -->
<router-outlet></router-outlet>

3. 子组件订阅筛选状态并应用筛选 #

在每个子组件（News/Video/Audio）里注入服务，订阅筛选状态，不管是组件初始化还是后续筛选器变化，都能自动应用筛选逻辑：

// news.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FilterService } from '../filter.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html'
})
export class NewsComponent implements OnInit, OnDestroy {
  private filterSub?: Subscription;
  originalNews = [/* 你的原始新闻数据 */];
  filteredNews: any[] = [];

  constructor(private filterService: FilterService) {}

  ngOnInit() {
    // 订阅筛选状态，初始加载和后续变化都会触发
    this.filterSub = this.filterService.filterState.subscribe(filters => {
      this.applyFilters(filters);
    });
  }

  // 自定义筛选逻辑
  applyFilters(filters: {[key: string]: boolean}) {
    this.filteredNews = [...this.originalNews];
    
    if (filters.showLatest) {
      this.filteredNews = this.filteredNews.filter(news => news.isLatest);
    }
    if (filters.showPopular) {
      this.filteredNews = this.filteredNews.filter(news => news.popularity > 80);
    }
    // 其他筛选条件...
  }

  // 组件销毁时取消订阅，防止内存泄漏
  ngOnDestroy() {
    this.filterSub?.unsubscribe();
  }
}

Video和Audio组件只需要替换数据和对应的筛选逻辑即可，逻辑完全一致。

方案二：用路由查询参数传递筛选条件 #

如果需要让筛选状态同步到URL中（比如用户可以分享带筛选条件的链接），可以用这个方案：

1. 父组件更新路由查询参数 #

在父组件中，当筛选器变化时，把筛选状态转为查询参数更新到路由：

// parent.component.ts
import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  filters = {
    showLatest: false,
    showPopular: false,
    showTrending: false
  };

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

  onFilterChange() {
    // 将筛选状态转为查询参数（注意布尔值要转成字符串）
    const queryParams = {
      showLatest: this.filters.showLatest.toString(),
      showPopular: this.filters.showPopular.toString(),
      showTrending: this.filters.showTrending.toString()
    };

    // 更新当前路由的查询参数，不触发页面刷新
    this.router.navigate([], {
      relativeTo: this.route,
      queryParams: queryParams,
      queryParamsHandling: 'merge' // 保留其他可能的查询参数
    });
  }
}

2. 子组件订阅查询参数并应用筛选 #

在子组件中，订阅路由的查询参数变化，然后应用筛选：

// news.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html'
})
export class NewsComponent implements OnInit {
  originalNews = [/* 你的原始新闻数据 */];
  filteredNews: any[] = [];

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 订阅查询参数变化
    this.route.queryParams.subscribe(params => {
      const filters = {
        showLatest: params.showLatest === 'true',
        showPopular: params.showPopular === 'true',
        showTrending: params.showTrending === 'true'
      };
      this.applyFilters(filters);
    });
  }

  applyFilters(filters: {[key: string]: boolean}) {
    // 和方案一的筛选逻辑一致
    this.filteredNews = [...this.originalNews];
    if (filters.showLatest) {
      this.filteredNews = this.filteredNews.filter(news => news.isLatest);
    }
    // ...其他筛选逻辑
  }
}

方案选择建议 #

• 如果不需要URL同步筛选状态，选方案一，代码更简洁，状态管理更灵活；
• 如果需要分享筛选后的页面链接，选方案二，URL会带上筛选参数，用户打开链接就能看到对应筛选结果。

内容的提问来源于stack exchange，提问作者Algi