指令子向父組件的依賴注入

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

我希望它能幫助