将 <audio> 标记绑定到组件属性答案

【问题标题】：Binding an <audio> tag to a component property将 <audio> 标记绑定到组件属性
【发布时间】：2020-08-09 21:19:45
【问题描述】：

我正在构建一个应用程序，其中一些组件包含音频，因此我构建了一个音频组件。为简化起见，假设我们正在进行英雄之旅，并为每个英雄添加一首最喜欢的歌曲。假设每个英雄都有一个audio_path 属性（指定位置），我可以在<audio> 标签中使用此路径并播放。但是，在英雄之间切换时，歌曲不会停止，音频文件也不会替换（请参阅https://stackblitz.com/edit/angular-toh-audio，由于某种原因，在我的电脑上完全不会播放声音）。

问题是这样的：在同一模板（hero1->hero2）的组件之间切换时，audio 元素不会改变。如果中间有另一个不同模板的组件（hero1->dragon1->hero2），它会正确切换audio，我假设是因为dragon 组件不包含音频标签（dragon 没有在闪电战中实现，但我的这个词）。

就像我经常无法将audio 元素正确绑定到组件属性一样（尝试时出现此错误）：

ERROR 错误：没有未指定名称的表单控件的值访问器属性

我在使用CdkDragDrop 元素时遇到了类似的问题（在两个相邻组件之间导航时无法更新内容）。简单元素（文本、文本输入、单选按钮、图像）不会发生这种情况。

有什么想法吗？

【问题讨论】：

标签： angular data-binding html5-audio

【解决方案1】：

第三方控件需要 ControlValueAccessor 才能使用角度形式。将此添加到音频控件 ngDefaultControl。阅读更多here

【讨论】：

【解决方案2】：

多次失败后，解决方法如下：

在包含组件中使用[(ngModel)] 对音频元素进行双向绑定
在音频组件设置中，添加如下声明：

@Component({ ... providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AudioElementComponent), multi: true } ] })

实现ControlValueAccessor 接口

可以在here找到详尽的解释

【讨论】：