Angular自定义StackPanel组件如何禁用ng-content内所有子组件与元素

问题1解答：是否可以直接给ng-content内的子组件设置@Input属性 #

可以通过Angular提供的@ContentChildren装饰器结合DI令牌实现，无需依赖DOM节点即可直接获取子组件实例并操作输入属性，实现步骤如下：

1. 定义统一的可禁用接口和DI令牌，所有自定义组件实现该接口并注册对应的DI令牌，即可被父组件统一查询到。
2. 在StackPanel组件中用@ContentChildren查询所有注册了令牌的子组件实例，直接修改其disabled输入属性即可。

问题2解答：更合理的实现方案 #

优先推荐使用HTML原生inert属性的方案，仅需一行代码即可满足所有禁用需求，无需遍历子元素或修改子组件逻辑：

• 给根容器添加[attr.inert]="disabled ? '' : null"属性即可，被标记inert的元素会被浏览器完全拦截所有交互行为：包括点击、键盘聚焦、回车触发、表单提交等，tab键也无法聚焦到容器内的任何元素，完全符合禁用要求，当前主流浏览器均已支持该属性。

如果需要兼容不支持inert属性的老旧浏览器，可以搭配@ContentChildren查询+交互拦截的组合方案实现，双重保障禁用效果。

完整代码示例 #

1. 自定义组件统一注册令牌（所有自行开发的带@Input() disabled的组件都需要添加） #

import { Component, Input, forwardRef } from '@angular/core';

// 统一的可禁用接口
export interface Disableable {
  disabled: boolean;
}

@Component({
  selector: 'app-your-custom-component',
  template: `<!-- 你的组件模板 -->`,
  // 注册DI令牌，方便父组件查询
  providers: [{ 
    provide: 'DISABLEABLE_TOKEN', 
    useExisting: forwardRef(() => YourCustomComponent) 
  }]
})
export class YourCustomComponent implements Disableable {
  @Input() disabled = false;
  // 其余组件逻辑
}

2. StackPanel组件实现 #

import { Component, Input, ContentChildren, QueryList, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
import { Disableable } from './disableable.interface';

@Component({
  selector: 'app-stack-panel',
  templateUrl: './stack-panel.component.html'
})
export class StackPanelComponent implements OnChanges {
  @Input() orientation: 'row' | 'column' = 'column';
  @Input() spacing: string = '0px';
  @Input() margin_bottom: string = '0px';
  @Input() margin_left: string = '0px';
  @Input() margin_right: string = '0px';
  @Input() margin_top: string = '0px';
  @Input() width: string = 'auto';
  @Input() height: string = 'auto';
  @Input() background: string = 'transparent';
  @Input() disabled: boolean = false;

  // 查询所有实现了DISABLEABLE_TOKEN的自定义子组件
  @ContentChildren('DISABLEABLE_TOKEN') disableableChildren!: QueryList<Disableable>;
  // 查询所有子DOM元素，用于处理原生可交互控件
  @ContentChildren(ElementRef) childElements!: QueryList<ElementRef<HTMLElement>>;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['disabled']) {
      this.updateAllChildrenDisabled(this.disabled);
    }
  }

  private updateAllChildrenDisabled(isDisabled: boolean): void {
    // 更新自定义子组件的disabled属性
    this.disableableChildren.forEach(child => {
      child.disabled = isDisabled;
    });

    // 更新原生可交互元素的disabled属性
    const nativeDisableableTags = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTION', 'FIELDSET'];
    this.childElements.forEach(elRef => {
      const el = elRef.nativeElement;
      if (nativeDisableableTags.includes(el.tagName)) {
        (el as any).disabled = isDisabled;
      }
      // 额外处理聚焦逻辑，兼容不支持inert的场景
      isDisabled ? el.setAttribute('tabindex', '-1') : el.removeAttribute('tabindex');
    });
  }
}

3. StackPanel组件模板修改 #

<div #root
     [fxLayout]="orientation"
     fxLayoutAlign="flex-start"
     [fxLayoutGap]="spacing"
     [style.marginBottom]="margin_bottom"
     [style.marginLeft]="margin_left"
     [style.marginRight]="margin_right"
     [style.marginTop]="margin_top"
     [style.width]="width"
     [style.height]="height"
     [style.background]="background"
     <!-- 原生inert属性，直接拦截所有交互 -->
     [attr.inert]="disabled ? '' : null"
     <!-- 额外添加点击事件拦截，兼容老旧浏览器 -->
     [style.pointerEvents]="disabled ? 'none' : 'auto'">
  <ng-content></ng-content>
</div>

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