如何将 URL 绑定到 Web 组件的属性

Question

我有一个Web组件（包装的react-app）需要接收一个文件和另一个字符串参数。我尝试按照here描述的方式将其嵌入到我的角度应用程序（角度18）中，效果很好。 除了我无法通过从角度绑定 Web 组件来接收属性值。

组件通过使用

this.getAttribute('language')

读取值来获取值，这适用于硬编码值。

我尝试将 URL 作为字符串直接绑定到组件：

<my-component [attr.fileUrl]="fileUrl" [attr.lang]="languageIsoCode"></my-component>

这将属性添加到了 DOM，但组件似乎无法读取它。

我还尝试使用经过净化的 SafeUrl：

<my-component [attr.fileUrl]="domSanitizer.bypassSecurityTrustResourceUrl(fileUrl)" [attr.lang]="languageIsoCode"></my-component>

这样它将错误“SafeValue 必须使用 [property]=binding:...”写入属性中。但是，如果我删除绑定中的“attr”，它将完全从 DOM 元素中删除该属性。

只有当我直接对 URL 进行硬编码时，它才有效。

<my-component fileUrl="https://some.url.com" [attr.lang]="languageIsoCode"></my-component>

第二个“lang”属性也是如此，也只能进行硬编码。

我错过了什么？

Answer 1

不要使用 [attr.fileUrl]，而是尝试直接将 URL 和语言代码作为属性传递：

<my-component [fileUrl]="fileUrl" [lang]="languageIsoCode"></my-component>