我想要 this.actionid 中 link_id 的值，并在 Ionic 中调用该函数

Question

我的.ts文件中有一个js代码。它在单击时从范围中获取属性，我想在 .ts 变量中捕获属性的值并调用 ts 函数

请参阅我的ngOnInit代码，我只需要this.actionid中的link_id值并调用函数callpagedata()

我在home.ts中有如下 js 代码：

actionid;
 ngOnInit(){
var mainDiv = document.getElementById("mainDiv");
mainDiv.addEventListener("click", function (event) {
  console.log("Inside Event Listener");
  event.preventDefault();
    var link_id = $(event.target).attr("action");
    console.log("Actionid is:: " + link_id);
});
}

我只需要 this.actionid 中的 link_id 值并调用函数 callpagedata((。我像this.actionid = linkId一样尝试过，但它不允许actionid事件侦听器内部，也不允许link_id外部。

callpagedata(){
}

首页.html代码

<div id="mainDiv">
  <span action="10004">Quick Task</span>
  <span action="10006">Quick Patrol</span>
</div>

Answer 1

您正在尝试在事件处理程序中引用"this"对象。此处的"this"对象表示当前事件侦听器对象。因此，请尝试分配主函数的"this"对象，例如this_parent = this，然后使用this_parent.actionid进行访问：

 actionid;
    ngOnInit(){
        var mainDiv = document.getElementById("mainDiv");
        let this_parent = this;
        mainDiv.addEventListener("click", function (event) {
            console.log("Inside Event Listener");
            event.preventDefault();
            var link_id = $(event.target).attr("action");
            console.log("Actionid is:: " + link_id);
            this_parent.actionid = link_id;
    });
    }

Answer 2

你不需要

使用 jQuery 来做到这一点。而且，我还建议您在这种情况下使用角度。

但是，保留你的代码，你可以这样做

打字稿：

ngOnInit(){
    var mainDiv = document.getElementById("mainDiv");
    mainDiv.addEventListener("click", function (event) {
      console.log("Inside Event Listener");
      event.preventDefault();
        console.log(event.target);
        var link_id = (<HTMLElement>event.target).getAttribute('action');
        // the cast is necessary because we're using typescript, so, we have to tell to the compiler, that the event.target is an HTMLElement.
        console.log("Actionid is:: " + link_id);
    });
}

我已经测试过，这段代码工作正常。但我建议你使用 Angular Events ，所以你可以有这样的东西：

.HTML：

<div id="mainDiv">
  <span (click)="myFunction(10004)">Quick Task</span>
  <span (click)="myFunction(10006)">Quick Patrol</span>
</div>

打字稿：

myFunction(value: number): void {
    console.log('my value', value);
}

我希望它对你有所帮助。