Angular 12中如何将菜单项名称传递给路由组件

方法1：通过路由查询参数传递分类名称 #

这种方式直接在跳转时把分类名称附带在路由中，主组件读取后即可传给Header。

1. 修改侧边栏的路由跳转逻辑，添加查询参数：

<!-- side-bar.component.html -->
<aside>
  <!-- 其他HTML内容 -->
  <main class="container" *ngFor="let item of categories">
    <div class="trilha" [routerLink]="['/category', item.id]" [queryParams]="{ title: item.title }">
      <span class="item-name">{{ item.title }}</span>
    </div>
  </main>
</aside>

注意：你当前代码中TS变量是categories，但HTML循环写的是items，需要统一为categories才能正常循环

2. 在MainContentComponent中读取查询参数，定义存储名称的变量：

// main-content.component.ts
@Component({
  selector: "app-main-content",
  templateUrl: "./main-content.component.html",
  styleUrls: ["./main-content.component.css"],
})
export class MainContentComponent implements OnInit {
  categoryId: number = 0;
  categoryTitle: string = '';

  constructor(
    private service: CategoryService,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.categoryId = this.activatedRoute.snapshot.params["id"];
    // 读取路由查询参数中的分类名称
    this.categoryTitle = this.activatedRoute.snapshot.queryParams["title"];
  }
}

3. 将名称传递给Header组件：

<!-- main-content.component.html -->
<app-header [Title]="categoryTitle"></app-header>

<div class="content">
    <app-category-content></app-category-content>
</div>

方法2：根据ID从服务获取分类名称 #

如果不想在路由中暴露分类名称，或者需要确保名称数据的实时性，可以通过服务根据ID查询完整分类信息。

1. 在MainContentComponent中调用服务获取分类详情：

// main-content.component.ts
@Component({
  selector: "app-main-content",
  templateUrl: "./main-content.component.html",
  styleUrls: ["./main-content.component.css"],
})
export class MainContentComponent implements OnInit {
  categoryId: number = 0;
  categoryTitle: string = '';

  constructor(
    private service: CategoryService,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.categoryId = this.activatedRoute.snapshot.params["id"];
    // 根据ID调用服务获取分类信息
    this.service.findById(this.categoryId).subscribe((category) => {
      this.categoryTitle = category.title;
    });
  }
}

需要确保你的CategoryService已实现findById方法，用于根据ID查询单个分类

2. 同样将名称传递给Header组件：

<!-- main-content.component.html -->
<app-header [Title]="categoryTitle"></app-header>

<div class="content">
    <app-category-content></app-category-content>
</div>

额外优化点 #

如果需要支持在同一个MainContentComponent内切换不同分类（无需刷新页面），建议订阅路由参数的变化，而不是仅读取一次快照：

// main-content.component.ts
ngOnInit(): void {
  this.activatedRoute.params.subscribe(params => {
    this.categoryId = params["id"];
    // 每次ID变化时重新获取分类名称
    this.service.findById(this.categoryId).subscribe(category => {
      this.categoryTitle = category.title;
    });
  });
}

内容的提问来源于stack exchange，提问作者Guilherme Feulo do Espirito Sa