Angular中如何通过指令修改宿主组件的@Input属性icon

要修改宿主组件的@Input属性，你之前尝试的操作DOM元素的方法都无效，核心原因是：组件的@Input属性是组件类实例的属性，而非宿主DOM元素的属性或属性节点。直接操作nativeElement只会修改DOM元素，无法触达组件类内部的icon变量。

正确实现方式：注入宿主组件实例 #

通过Angular的依赖注入机制，直接获取宿主组件的实例，就能直接修改其@Input属性。

修改后的指令代码

import { Directive, AfterViewInit, Inject } from '@angular/core';
import { MyComponent } from './path/to/my-component.component'; // 替换为宿主组件的实际路径

@Directive({
  selector: '[scrolling]'
})
export class ScrollingDirective implements AfterViewInit {

  // 注入宿主组件实例
  constructor(@Inject(MyComponent) private hostComponent: MyComponent) {}

  ngAfterViewInit() {
    // 直接修改组件实例的icon属性
    this.hostComponent.icon = 'someValue';
    
    // 若宿主组件使用OnPush变更检测策略，需手动触发检测
    // this.hostComponent.cdr?.detectChanges();
  }
}

关键说明

1. 导入宿主组件：确保指令能访问到MyComponent类，需将路径替换为实际路径，且组件需在指令所在模块中声明或导出。
2. 注入实例：通过@Inject(MyComponent)直接获取应用指令的宿主组件实例——这是Angular依赖注入的特性：当指令应用在组件上时，该组件实例会被自动注入到指令中。
3. 变更检测（可选）：如果宿主组件使用了ChangeDetectionStrategy.OnPush，修改属性后需要调用组件的ChangeDetectorRef.detectChanges()来触发视图更新。

为什么之前的方法无效？ #

• @HostBinding('attr.icon')：绑定的是DOM元素的属性节点（即HTML标签上的icon属性），和组件类的@Input() icon完全无关。
• this.el.nativeElement.icon/renderer.setProperty(...)：操作的是组件的宿主DOM元素，而非组件类实例，自然无法修改组件的@Input属性。

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