将指令子依赖注入到父组件中答案

【问题标题】：Dependency injection of directive child into parent component将指令子依赖注入到父组件中
【发布时间】：2015-11-10 16:55:42
【问题描述】：

我试图通过编写指令包装器来控制 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 组件？

【问题讨论】：

标签： angular

【解决方案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

希望对你有帮助

【讨论】：

非常感谢@Eric！我想知道这是如何工作的。 exportAs 的文档用处不大。