Angular中使用Input Signal传递SafeValue报错，该如何解决？

问题场景 #

我原本想在preview.component里用Input Signal接收URL，代码如下：

hrefLink = input.required<SafeValue>();

在组件模板preview.component.html中使用：

<img [src]="hrefLink"/>

在config.component.ts中做了安全URL处理：

useLink: SafeValue;
...
initMethod() {
  this.useLink = this.domSanitizer.bypassSecurityTrustResourceUrl(
    myNavigationURL
  )
}

并在config.component.html中传入值：

<app-preview [hrefLink]="useLink"/>

运行时出现错误：

unsafe:[Input Signal: SafeValue must use [property]=binding

请问是遗漏了配置还是类型检查有问题？

问题原因与解决方法 #

• 核心问题：Input Signal的原始值不能直接绑定到DOM属性，因为Signal本身是一个可调用的对象，必须通过调用hrefLink()来获取它的实际值。
• 修复后的preview.component.html代码：

<img [src]="hrefLink()"/>

解释：Angular的Input Signal是一个可调用的信号实例，不是直接的属性值。当你在模板中写hrefLink时，引用的是Signal对象本身，而非它包含的SafeValue。通过()调用Signal获取当前值后，Angular才能正确识别这是经过安全处理的值，从而避免安全绑定报错。

这不是配置遗漏或类型检查漏洞，只是对Input Signal的使用方式理解有误。

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