更新

Question

我有以下html（我的角度5组件中的模板）：

<div class="center">
    <object id="img" data="assets/img/big_layout.svg" #svg></object>
</div>

在我的组件中，我有这个：

  @ViewChild('svg') svg: ElementRef;

  ngAfterViewInit() {
    this.svg.nativeElement.addEventListener('load', () => { // wait for the svg to load
      console.log('Clicked...')
    }, false);
  }

正如预期的那样，这个逻辑正常工作 - 当组件加载时，我会为视图中的每个组件实例记录Clicked...。

但是，只要我将事件从'load'更改为'click'，点击svg就不会触发任何事件？

知道为什么吗？

更新

如链接问题所述，以下html不会触发点击事件：

<div class="center" (click)="onClick()">
    <object id="img" (click)="onClick()" data="assets/img/big_layout.svg" #svg></object>
</div>

这是一个demo

Answer 1

它对你的项目不起作用很奇怪，可能是因为新的5版本。

您可以通过直接在模板上绑定(click)事件来实现您想要的目标：

<div class="center">
    <object id="img" data="assets/img/big_layout.svg" (click)="onClick()"></object>
</div>

通过在组件文件中添加方法：

onClick() {
    console.log('Clicked');
}

编辑： 对象标签就像iframe，出于安全目的，无法访问它们！

点击事件不会在点击时触发？

更新

1 个答案: