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

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类中控制这些组件。

我尝试使用

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

这让我ElementRef对象，而不是MyAudio对象AudioPlayer注入这两个指令。

但这部作品

@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

我希望它能帮助