如何通过指令设置Angular组件的inputSignal？

问题背景 #

使用input()创建的InputSignal是只读的，无法直接在外部指令中调用set()方法更新值。此前使用带setter的@Input可以实现类似功能，现在希望用Signal方案完成相同需求。

解决方案 #

方法1：通过HostBinding直接绑定输入属性别名 #

利用Angular的属性绑定机制，在指令中通过@HostBinding直接设置组件输入属性的别名，Angular会自动同步更新对应的InputSignal值，无需手动操作组件实例。

修改指令代码如下：

@Directive({
  selector: '[my-component][withPredefinedContent]',
  standalone: true,
})
export class MyDirective {
  // 绑定到组件输入属性的别名"my-component"
  @HostBinding('my-component')
  readonly predefinedContent = `I can do this now`;
}

方法2：组件内部暴露更新接口 #

如果需要更灵活的控制（比如动态计算值），可以在组件内部将InputSignal与可写Signal结合，并暴露更新方法供指令调用：

步骤1：修改组件代码

@Component({
  selector: '[my-component]',
  standalone: true,
  template: `{{content()}}`,
})
export class MyComponent {
  // 接收外部输入的只读InputSignal
  private readonly _inputContent = input<string | undefined>(undefined, { alias: 'my-component' });
  // 对外暴露的可写Signal，初始值同步自输入
  public readonly content = signal<string | undefined>(this._inputContent());

  constructor() {
    // 监听输入变化，同步到可写Signal
    effect(() => {
      const inputVal = this._inputContent();
      if (inputVal !== undefined) {
        this.content.set(inputVal);
      }
    });
  }

  // 暴露更新方法给外部指令调用
  setContent(value: string | undefined) {
    this.content.set(value);
  }
}

步骤2：修改指令代码

@Directive({
  selector: '[my-component][withPredefinedContent]',
  standalone: true,
})
export class MyDirective implements OnInit {
  private readonly component = inject(MyComponent, { host: true });

  ngOnInit() {
    // 调用组件暴露的更新方法设置值
    this.component.setContent(`I can do this now`);
  }
}

原代码问题说明 #

input()创建的InputSignal是只读的，其内部的set()方法仅由Angular框架在输入属性变化时调用，外部代码无法直接访问该方法，因此直接调用this.component.content.set()会报错。

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