Привязка тега <audio>к свойству компонента

Question

Я создаю приложение, в котором некоторые компоненты содержат аудио, поэтому я создал аудио компонент. Для упрощения предположим, что мы с туром по героям angular и добавляем любимую песню каждому из героев. Поскольку у каждого героя есть атрибут audio_path (который указывает местоположение), я могу использовать этот путь в теге <audio>, и он воспроизводится. Однако при переключении между героями песня не останавливается и аудиофайл не заменяется (см. https://stackblitz.com/edit/angular-toh-audio, по некоторым причинам звук не воспроизводится, в то время как на моем компьютере он полностью воспроизводится).

Проблема в следующем: при переключении между компонентами одного и того же шаблона (hero1-> hero2) элемент audio не изменяется. Если в середине был другой компонент другого шаблона (hero1-> dragon1-> hero2), он правильно переключает audio, я полагаю, потому что компонент dragon не содержит звуковой тег (dragon не реализован на блице, но я беру мой слово для этого).

Я постоянно не могу правильно связать элемент audio со свойством компонента (при попытке получить эту ошибку):

ОШИБКА Ошибка: Нет доступа к значению для элемента управления формы с неопределенным атрибутом имени

У меня возникла похожая проблема (не удалось обновить содержимое при переходе между двумя смежными компонентами) с элементами CdkDragDrop. Это не происходит с простыми элементами (текст, текстовый ввод, переключатели, изображения).

Есть идеи?

Answer 1

После многих сбоев решение было следующим:

1. Двухстороннее связывание аудиоэлемента с использованием [(ngModel)] в содержащем компоненте

2. в настройке аудио компонента, добавив следующее объявление:

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

реализация интерфейса ControlValueAccessor

подробное объяснение можно найти здесь

Answer 2

Сторонним элементам управления требуется ControlValueAccessor для работы с angular формами. Добавьте это к элементам управления звуком ngDefaultControl . читать дальше здесь