Angular中用自定义指令修改组件@Input输入属性不生效怎么办

你当前的实现完全无法生效，核心原因有两点：

• Angular的@Input输入属性和原生DOM的attribute是两套完全独立的体系：@Input是挂载在组件类实例上的JavaScript属性，和原生DOM的attribute没有自动双向同步的机制。你直接通过this.el.nativeElement.attributes.collapsable = true修改的只是原生DOM上的字符串属性，Angular的变更检测流程根本感知不到这个改动，自然不会同步到BoxComponent的内部属性上。
• 生命周期时机不对：你在ngAfterViewInit阶段才执行赋值逻辑，此时组件的首轮输入初始化、模板渲染、变更检测已经全部完成，哪怕赋值逻辑真的触达了组件内部，也会错过组件响应输入变化的时机，甚至触发ExpressionChangedAfterItHasBeenCheckedError类的运行时报错。

完全可以通过自定义指令修改目标组件的@Input属性，根据你的耦合需求选对应的实现方式即可：

方案1：直接注入宿主组件实例（最简便，适配确定目标组件类型的场景） #

由于自定义指令和BoxComponent是挂载在同一个宿主元素上的，二者共享元素级的依赖注入器，你可以直接在指令的构造函数中注入BoxComponent的实例，直接为它的输入属性赋值即可。
示例代码：

@Directive({
  selector: '[box-collapsable]'
})
export class BoxCollapsableDirective {
  // 直接获取同元素上的BoxComponent实例
  constructor(private boxComponent: BoxComponent) {}

  ngOnInit(): void {
    // 直接修改组件的输入属性
    this.boxComponent.collapsable = true;
  }
}

注意：赋值时机选在ngOnInit阶段即可，不要延迟到ngAfterViewInit，避免组件模板初始化时读取到的还是默认的false值。

方案2：使用通用API赋值（适配不想硬耦合具体组件类型的场景） #

如果你的指令需要挂载到多个带collapsable输入的组件上，不想直接依赖BoxComponent的类型，可以使用Angular官方提供的setInput API完成输入赋值，这个方法完全兼容Angular的变更检测流程，不会触发时序类报错。
示例代码：

import { Directive, ChangeDetectorRef, ComponentRef } from '@angular/core';

@Directive({
  selector: '[box-collapsable]'
})
export class BoxCollapsableDirective {
  constructor(private cdr: ChangeDetectorRef) {
    // 在变更检测执行前的微任务阶段设置输入值
    queueMicrotask(() => {
      // 获取当前元素关联的组件引用
      const componentRef = this.cdr as unknown as ComponentRef<{collapsable: boolean}>;
      // 按Angular官方的输入更新流程设置值
      componentRef.setInput('collapsable', true);
    });
  }
}

• 不要试图通过修改原生DOM attribute驱动Angular组件的输入值：原生DOM attribute存储的永远是字符串类型的值，且Angular不会主动把这些值同步到组件类的输入属性上，这类操作完全无效。
• 不要在组件视图初始化完成后才设置输入属性：这种操作会让组件内部依赖该输入值的逻辑（比如模板渲染、ngOnChanges钩子）无法正确响应，大概率出现变更检测时序报错。

内容的提问来源于stack exchange，提问作者Danilo Körber