Angular中如何判断投影内容中input的所属父组件？

方案1：依赖注入检测（推荐） #

通过Angular自带的依赖注入能力，沿组件树向上查找对应父组件的实例，是最符合Angular最佳实践的实现方式，不受DOM结构调整影响，类型安全。
你可以为需要做差异化处理的input封装一个自定义指令，代码示例如下：

import { Directive, Optional, Host, OnInit, ElementRef } from '@angular/core';
import { AppChipListComponent } from './app-chip-list.component';
import { AppFormFieldComponent } from './app-form-field.component';

@Directive({
  selector: 'input[appInputAdaptor]'
})
export class InputAdaptorDirective implements OnInit {
  constructor(
    // 可选注入最近的app-chip-list实例，@Host限定仅在当前内容投影宿主范围内查找
    @Optional() @Host() private chipList: AppChipListComponent,
    @Optional() @Host() private formField: AppFormFieldComponent,
    private elementRef: ElementRef<HTMLInputElement>
  ) {}

  ngOnInit(): void {
    if (this.chipList) {
      // 父组件包含app-chip-list的交互逻辑，比如回车新增标签、输入联想过滤等
      this.handleChipListMode();
    } else if (this.formField) {
      // 直接挂在app-form-field下的交互逻辑，比如回车提交表单、失焦校验等
      this.handleFormFieldMode();
    }
  }

  private handleChipListMode(): void {
    // 实现对应逻辑
  }

  private handleFormFieldMode(): void {
    // 实现对应逻辑
  }
}

使用时只需要给目标input加上指令属性即可：

<input appInputAdaptor />

方案2：DOM节点查询（轻量快速） #

如果不想引入组件依赖，可以通过原生DOM API直接向上查找父节点标签，实现更简单，适合DOM结构稳定的临时场景：

ngOnInit(): void {
  // 向上查找最近的app-chip-list节点，存在则说明是第一种结构
  const hasChipListParent = !!this.elementRef.nativeElement.closest('app-chip-list');
  if (hasChipListParent) {
    this.handleChipListMode();
  } else {
    this.handleFormFieldMode();
  }
}

两种方案对比 #

• 依赖注入方案：无DOM依赖、类型安全，后续组件内部结构调整（比如chip-list新增内层包裹div）不会失效，适合长期维护的正式项目
• DOM查询方案：代码量小、不需要引入对应组件类，仅适合结构固定的临时需求，后续组件标签名修改、结构调整都会导致逻辑失效

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