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

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 class.

控制这些组件

我尝试使用

在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

希望对你有帮助

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

Dependency injection of directive child into parent component

angular