点击其他组件的分类链接时，如何更新另一组件的文章列表？

嘿，我明白你的困惑了——很多刚接触Angular路由的开发者都会对router-outlet的用法有点误解，其实它完全可以帮你实现跨组件的内容更新，甚至还有其他几种方案能解决你的需求，我给你拆解一下：

方案一：使用Angular路由（最推荐，符合框架设计理念） #

你之前对router-outlet的理解有偏差，它的核心作用是作为路由匹配组件的容器，不管这个容器和你的分类导航组件是不是在同一个父组件里，只要路由配置正确，就能实现点击导航后在目标位置加载对应组件。

具体步骤： #

1. 配置路由规则
   在app-routing.module.ts里定义路由，把分类作为路由参数传递：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ArticleListComponent } from './article-list/article-list.component';

const routes: Routes = [
  // 默认加载全部文章
  { path: '', redirectTo: '/articles/all', pathMatch: 'full' },
  // 带分类参数的路由，匹配后加载ArticleListComponent
  { path: 'articles/:category', component: ArticleListComponent }
];

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

2. 分类导航组件添加路由链接
   在你的分类链接组件里，用routerLink指令生成路由链接：

<!-- 分类导航组件模板 -->
<div class="category-nav">
  <a [routerLink]="['/articles', 'all']">全部文章</a>
  <a [routerLink]="['/articles', 'tech']">科技</a>
  <a [routerLink]="['/articles', 'life']">生活</a>
  <a [routerLink]="['/articles', 'sports']">体育</a>
</div>

3. 在主页面放置导航组件和路由出口
   比如在AppComponent的模板里，同时引入导航组件和router-outlet——后者就是用来加载ArticleListComponent的容器：

<!-- app.component.html -->
<app-category-nav></app-category-nav>
<main class="content-area">
  <router-outlet></router-outlet> <!-- 这里会动态加载对应分类的文章列表组件 -->
</main>

4. 在文章列表组件中获取分类参数并加载数据
   通过ActivatedRoute获取路由中的分类参数，然后请求对应分类的文章：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ArticleService } from '../article.service';
import { Article } from '../models/article.model';

@Component({
  selector: 'app-article-list',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.css']
})
export class ArticleListComponent implements OnInit {
  articles: Article[] = [];

  constructor(
    private route: ActivatedRoute,
    private articleService: ArticleService
  ) { }

  ngOnInit(): void {
    // 监听路由参数变化，处理分类切换
    this.route.paramMap.subscribe(params => {
      const category = params.get('category');
      if (category) {
        // 调用服务获取对应分类的文章
        this.articleService.getArticlesByCategory(category).subscribe(
          data => this.articles = data,
          error => console.error('加载文章失败:', error)
        );
      }
    });
  }
}

这种方案的好处是：自动同步URL、支持浏览器前进后退、可以直接分享分类链接，完全符合现代单页应用的用户体验。

方案二：组件间通信（无需路由的场景） #

如果你的场景不需要URL同步，也可以用Angular的组件间通信方案，比如共享服务（适合无父子关系的组件）：

具体步骤： #

1. 创建共享的分类服务
   用Subject来传递分类切换的事件：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CategoryService {
  // 定义一个Subject来发送分类切换事件
  private categoryChange$ = new Subject<string>();
  // 对外暴露可观察对象，避免外部直接发送事件
  public categorySelected$ = this.categoryChange$.asObservable();

  // 触发分类切换的方法
  selectCategory(category: string): void {
    this.categoryChange$.next(category);
  }
}

2. 分类导航组件调用服务方法
   点击链接时通知服务切换分类：

import { Component } from '@angular/core';
import { CategoryService } from '../category.service';

@Component({
  selector: 'app-category-nav',
  templateUrl: './category-nav.component.html',
  styleUrls: ['./category-nav.component.css']
})
export class CategoryNavComponent {
  constructor(private categoryService: CategoryService) { }

  onCategoryClick(category: string): void {
    this.categoryService.selectCategory(category);
  }
}

对应的模板：

<div class="category-nav">
  <button (click)="onCategoryClick('all')">全部文章</button>
  <button (click)="onCategoryClick('tech')">科技</button>
  <button (click)="onCategoryClick('life')">生活</button>
</div>

3. 文章列表组件订阅分类变化
   监听服务的分类事件，加载对应文章：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { CategoryService } from '../category.service';
import { ArticleService } from '../article.service';
import { Article } from '../models/article.model';

@Component({
  selector: 'app-article-list',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.css']
})
export class ArticleListComponent implements OnInit, OnDestroy {
  articles: Article[] = [];
  private subscription?: Subscription;

  constructor(
    private categoryService: CategoryService,
    private articleService: ArticleService
  ) { }

  ngOnInit(): void {
    // 订阅分类切换事件
    this.subscription = this.categoryService.categorySelected$.subscribe(category => {
      this.loadArticles(category);
    });
    // 初始化加载默认分类
    this.loadArticles('all');
  }

  private loadArticles(category: string): void {
    this.articleService.getArticlesByCategory(category).subscribe(
      data => this.articles = data,
      error => console.error('加载文章失败:', error)
    );
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.subscription?.unsubscribe();
  }
}

这种方案适合不需要URL变化的内部组件交互，但缺少路由方案的导航历史、链接分享等功能。

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