Angular 17.1指令中使用Signal Inputs报错问题咨询

问题描述 #

组件中可正常使用Angular 17.1的Signal Inputs特性：

public value: InputSignal<string> = input.required<string>();

但相同写法在自定义指令中失效，尽管官方提交记录明确Signal Inputs支持指令场景：

@Directive({..})
export class MyDir {
  firstName = input<string>();            // string|undefined
  lastName = input.required<string>();    // string
  age = input(0);                         // number
}

我的自定义指令代码：

@Directive({
    selector: '[appMyDirective]',
    standalone: true,
    exportAs: 'myDirective',
})
export class MyDirective {
    public value: InputSignal<string> = input.required<string>();
}

模板使用时：

<app-my-component
    appMyDirective
    [value]="aValue"
></app-my-component>

编译器报错：

Error: example.component.html:14:6 - error TS7053: Element implicitly has an 'any' type because expression of type 'unique symbol' can't be used to index type 'Signal<string>'.
  Property '["@angular/core".ɵINPUT_SIGNAL_BRAND_WRITE_TYPE]' does not exist on type 'Signal<string>'.

14     [value]="aValue"

怀疑是Angular新特性的bug，但想确认自身写法是否有误，寻求解决建议。

解决建议 #

1. 移除显式的InputSignal类型声明 #

官方示例中，指令的Signal Inputs均通过返回值自动推断类型，而非显式声明InputSignal。尝试修改指令代码：

@Directive({
    selector: '[appMyDirective]',
    standalone: true,
    exportAs: 'myDirective',
})
export class MyDirective {
    public value = input.required<string>();
}

显式声明类型可能破坏了Angular内部为指令Signal Inputs添加的特殊类型标记（报错中的ɵINPUT_SIGNAL_BRAND_WRITE_TYPE），导致编译器无法识别这是可绑定的输入信号。

2. 升级到Angular 17.1最新小版本 #

Signal Inputs刚发布，指令支持可能存在已知bug，建议升级到17.1的最新补丁版本（如17.1.1+），查看官方是否已修复该问题。

3. 临时使用传统@Input()替代 #

若上述方法无效，可暂时回退到传统@Input()写法：

@Directive({
    selector: '[appMyDirective]',
    standalone: true,
    exportAs: 'myDirective',
})
export class MyDirective {
    @Input({ required: true }) public value!: string;
}

4. 提交Issue反馈bug #

若确认是Angular框架问题，可在Angular官方仓库提交Issue，附上你的代码示例和报错信息，帮助官方定位修复。

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