Angular内容投影场景下子组件向父组件通信方案咨询

场景说明 #

正在开发带两级导航结构的Angular Header公共组件，组件基础使用结构如下：

<b-header>
  <b-header-nav>
    <b-header-nav-item>
      <button b-header-link>Primary 1</button>
    </b-header-nav-item>
    <b-header-nav-item>
      <button b-header-link>Primary 2</button>
    </b-header-nav-item>
    <b-header-nav-item>
      <button b-header-link>Primary 3</button>
    </b-header-nav-item>
  </b-header-nav>
</b-header>

核心约束 #

• 点击任意b-header-link按钮时，需要同时为按钮自身、其父级b-header-nav-item切换CSS激活状态类
• 组件为公共组件库，内部逻辑完全封装，不向终端使用者暴露事件绑定、状态传值的使用要求
• b-header-link通过ng-content内容投影方式插入到b-header-nav-item中，不属于父组件模板直接声明的子节点，常规@Output事件绑定、模板变量传值的方式不适用

可行实现方案 #

方案1：依赖注入获取父组件实例（优先使用） #

利用Angular的依赖注入层级规则，内容投影的指令/组件可以直接注入宿主层级的父组件实例，完全不需要使用者做额外配置：

1. 先在BHeaderNavItemComponent中维护激活状态，暴露状态修改方法：

// header-nav-item.component.ts
import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'b-header-nav-item',
  template: `<ng-content></ng-content>`
})
export class BHeaderNavItemComponent {
  // 直接绑定宿主元素的active类
  @HostBinding('class.active') isActive = false;

  setActive(state: boolean): void {
    this.isActive = state;
  }
}

2. 在b-header-link指令中注入父级NavItem实例，点击时同步更新自身和父级状态：

// header-link.directive.ts
import { Directive, HostBinding, HostListener, Optional, Host } from '@angular/core';
import { BHeaderNavItemComponent } from '../header-nav-item/header-nav-item.component';

@Directive({
  selector: '[b-header-link]'
})
export class BHeaderLinkDirective {
  @HostBinding('class.active') isActive = false;

  constructor(
    // 注入当前宿主层级的父nav-item实例，@Optional避免没有父级时报错
    @Optional() @Host() private parentNavItem: BHeaderNavItemComponent
  ) {}

  @HostListener('click')
  handleClick(): void {
    // 切换自身激活状态
    this.isActive = !this.isActive;
    // 同步父级状态
    this.parentNavItem?.setActive(this.isActive);
  }
}

如果需要实现同组导航单选效果（同一时间仅一个导航项激活），可以按同样的方式在link中注入上层BHeaderNavComponent，由Nav组件统一维护激活项，点击时先重置其他项状态再激活当前项即可。

方案2：DOM向上查找匹配父元素 #

如果不希望指令和父组件产生强依赖，可以在点击时通过原生DOM API向上查找最近的b-header-nav-item元素，直接操作class：

// header-link.directive.ts
import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[b-header-link]'
})
export class BHeaderLinkDirective {
  @HostBinding('class.active') isActive = false;

  constructor(private el: ElementRef<HTMLElement>) {}

  @HostListener('click')
  handleClick(): void {
    this.isActive = !this.isActive;
    const parentItem = this.el.nativeElement.closest('b-header-nav-item');
    parentItem?.classList.toggle('active', this.isActive);
  }
}

该方案的缺陷是强依赖组件的标签选择器命名，如果后续组件标签名、类名调整，逻辑会同步失效，仅作为备选方案使用。

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