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

Question

我有以下 html（我的 angular 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

奇怪的是它不适用于您的项目，可能是由于新的 angular 5 版本。

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

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

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

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

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