Question

我已经阅读了关于点击（）的信息，但是我并没有找到。我需要从函数访问dom并查看按钮是否被按下。我听说过ElementRef，但无法弄清楚如何使用它。我还看到我使用的一些类就像谷歌地图上的标记一样使用了addEventListener。

这是打字稿中准确的代码吗？：

cursorDom.addEventListener("change", event => {
  console.log("change");
  if(document.getElementById('cursor').style.visibility=='visible'){
    console.log("visible");
  }else{
    console.log("invisible");
  }
});

修改：

我整天都在通过了解wath相当于addEventListener（渲染器，elementRef，Viewchild ......）它变得更加温和而且更加温和。我想要做的就是一个eventListener，它检查div是否可见，但是没有todo函数。我发现最接近的是：

this.renderer.listen(this.elementRef.nativeElement, 'click', () => { /* callback */ });

但是没有设法解决这个问题。

让我说我有一个功能，我有我的所有初始化，我的Googlemarker在其中创建我想设置一个div的监听器，并监听它是否可见，并在功能设置标记到可见或不可见。

编辑2：

在空白页面上进行测试。

HTML：

<div id="cursor" #cursor [style.display]="isVisible ? 'inline' : 'none'"></div>

打字稿：

import { Component, ViewChild, Renderer } from '@angular/core';
import { NavController } from 'ionic-angular';


@Component({
 selector: 'page-signup',
 templateUrl: 'signup.html'
})

export class SignupPage {
   @ViewChild('cursor') myDiv;
   constructor(public navCtrl: NavController, renderer: Renderer) {
       renderer.listen(this.myDiv, 'change', event => console.log(event));
}

 ionViewDidLoad() {
   console.log('Hello Signup Page');
 }
}

错误：

 Cannot read property 'addEventListener' of undefined

Answer 1

您可以使用 ViewChild 装饰器获取您想要的任何元素：

@Component({
  selector: 'my-app',
  template: `
   <div #myDiv>Div</div>
  `,
})
export class App {
  @ViewChild('myDiv') myDiv;


  ngAfterContentInit() {
    // This is the native element, do whatever you want
    console.log(this.myDiv.nativeElement)
  }  

}

Answer 2

好吧，如果你需要添加一个事件监听器和一个回调，那就有一个HostListener模块：

@HostListener('window:click', ['$event'])
callback(event) {}

按下按钮时听

2 个答案: