Question

我试图通过编写指令包装来控制Angular2中的audio元素。

我面临的问题是从它的父组件控制这个音频元素。

查看我的plunkr。

我使用模板

创建了一个audio-player组件

  template: `Audio player 1: <audio  #tick1 src="/static/audio/tick10s.mp3"></audio><br>
            Adio player 2: <audio  #tick2 src="/static/audio/tick10s.mp3"></audio><br>`

这会为每个MyAudio和tick1创建一个指令tick2。我需要从AudioPlayer类控制这些组件。

我尝试使用

在AudioPlayer中注入这两个指令

  @ViewChild('tick1') tick1: MyAudio;
  @ViewChild('tick2') tick2: MyAudio;

这为我提供了ElementRef个对象，而不是MyAudio个对象。

但这有效

@ViewChildren(MyAudio) children: QueryList<MyAudio>;

但是使用这种方法我无法区分两个音频元素。

知道为什么会发生这种情况，如何才能获得具体的MyAudio组件？

Answer 1

您可以使用exportAs属性，这样#tick*变量将保存对指令的引用而不是元素。

@Directive({
  selector: 'audio',
  exportAs : 'myAudio'
})

然后在模板中，将名为myAudio的属性分配给相应的变量。

Audio player 1: <audio  #tick1="myAudio" src="/static/audio/tick10s.mp3"></audio>
Audio player 2: <audio  #tick2="myAudio" src="/static/audio/tick10s.mp3"></audio>

这是您的plnkr已更新并正在使用; D

我希望它有所帮助

将指令子的依赖注入父组件

1 个答案: