Angular中点击公共组件时如何控制子组件active类的唯一激活状态

核心思路 #

通过父组件维护全局激活状态，结合子组件的输入输出属性，实现两个子组件的激活状态互斥——同一时间仅允许一个子组件内的链接拥有active类。

具体实现步骤 #

1. 父组件定义激活状态变量
   在父组件的TypeScript文件中，声明用于标记当前激活组件的变量：

   // 父组件 .ts 文件
   activeComponent: 'header' | 'sidenav' | null = null; // 初始无激活组件，可根据需求设默认值
   

2. 子组件添加输入输出属性
   给app-header和sidenavbar两个子组件分别添加：

   • 输入属性allowActive：接收父组件传递的“是否允许当前组件激活”的状态
   • 输出属性componentClicked：向父组件发送“当前组件被点击”的事件

   以app-header为例：

   // HeaderComponent .ts 文件
   import { Component, Input, Output, EventEmitter } from '@angular/core';
   
   @Component({
     selector: 'app-header',
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss']
   })
   export class HeaderComponent {
     @Input() allowActive = false;
     @Output() componentClicked = new EventEmitter<void>();
     currentActiveLink = ''; // 子组件内部记录自身激活的链接
   
     // 点击链接时触发的方法
     onLinkClick(linkName: string) {
       this.currentActiveLink = linkName;
       this.componentClicked.emit(); // 通知父组件当前组件被点击
     }
   }
   

   sidenavbar组件做完全相同的处理，仅组件名和选择器不同。

3. 父组件模板绑定状态与事件
   在父组件的HTML模板中，给两个子组件绑定输入属性和事件监听：

   <!-- 父组件 .html 文件 -->
   <app-header 
     [allowActive]="activeComponent === 'header'"
     (componentClicked)="activeComponent = 'header'"
   ></app-header>
   
   <sidenavbar 
     [allowActive]="activeComponent === 'sidenav'"
     (componentClicked)="activeComponent = 'sidenav'"
   ></sidenavbar>
   

4. 子组件模板控制Active类显示
   在子组件的HTML模板中，结合allowActive和自身的currentActiveLink变量，动态控制链接的active类：

   <!-- HeaderComponent .html 文件 -->
   <a 
     [class.active]="allowActive && currentActiveLink === 'home'"
     (click)="onLinkClick('home')"
   >首页</a>
   <a 
     [class.active]="allowActive && currentActiveLink === 'about'"
     (click)="onLinkClick('about')"
   >关于我们</a>
   

方案优势 #

• 完全遵循Angular组件通信规范，避免使用::ng-deep这类破坏样式封装的手段
• 激活状态由父组件统一管控，逻辑清晰，便于后续扩展（如新增其他需要互斥的组件）
• 子组件仅需关注自身的链接状态，无需关心全局逻辑，保持组件独立性

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