W3C Web 组件中没有捕获 Angular 属性 [关闭]

Posted 2023-02-23

【中文标题】W3C Web 组件中没有捕获 Angular 属性 [关闭]

【英文标题】：No capture Angular Properties in W3C Web Components [closed]

【发布时间】：2021-10-16 14:37:19

【问题描述】：

我正在尝试使 Web 组件与不同的开发框架兼容，在我测试过的其余框架中，但在 Angular 中，我在与属性绑定时遇到了问题。

问题如下，在我的angular组件中，这将是我要放置web组件的地方，我已经准备了一系列值，我想在它的初始化过程中传递给web组件，并且如果那些值被改变了，我会在下面捕获和处理。

事实上，在初始化值时，我没有收到来自 Web 组件端的任何类型的属性，并且在更改值时，我也没有收到任何类型的响应响应。

我知道有一些 Web Components 框架，例如 Lit Elements，但鉴于项目的要求，我需要使用 vanilla 组件，因此需要使用 Web Components 标准（Shadow Root、模板、自定义元素等） ...)

我在这里留下了一个带有小操场的 StackBlitz 的链接，以便可以复制这个问题：Problem With Angular and Web Components

【参考方案1】：

您正在寻找属性，因此您应该像在 html 上那样定义它：

<d-counter [attr.count]="count" #dCounter></d-counter>

Stackblitz

【讨论】：

我正在探索那个解决方案，我遇到的问题是它设置的值晚（在 attributeChangedCallback 中触发），而不是在初始化阶段（在 connectedCallback 中触发），如果我有我的这里的组件初始化逻辑，它迫使我重新初始化整个组件，随后会失去它本来的初始性能。接近解决方案是一个很好的尝试，但我想看看后者是否可以实现，即组件与属性一起初始化。

hmm 可能是因为 Angular 在生命周期的后期设置了属性。稍后我会进一步研究它

如果您发现了什么，我将编辑答案并将其作为有价值的信息提供给可能遇到此问题的人。不过，非常感谢您的关注，我们非常重视。