Angular 在单击回调函数中调用另一个函数（此）

Question

我相信这个问题与关键字“this”没有分配给我假设的内容有关。

我正在使用 Angular 5 和 WordCloud 包。https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md

有一个单击回调函数，它返回在回调中单击的单词的单个字符串。当用户点击这个词时，我需要它来调用另一个函数并显示一个模态。

组件.ts

import { Component, OnInit, Input } from '@angular/core';
const WordCloud = require('wordcloud');

import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';
import { TopWordsModalComponent } from './top-words-modal/top-words-modal.component';

@Component({
    selector: 'app-top-words',
    templateUrl: './top-words.component.html',
    styleUrls: ['./top-words.component.scss']
})

export class TopWordsComponent implements OnInit {

    @Input() report;
    categories: any = null;
    filterForm: FormGroup;

    constructor(private fb: FormBuilder, public modal: MatDialog) {

    }

    ngOnInit() {

        const all_words = this.report.activity.top_words;

        this.generateWordCloud(all_words);

    }

    generateWordCloud(words) {

        WordCloud(document.getElementById('word_cloud'), {

            list: words,
            click: function (data) {
                console.log(this);
                this.openModal(data);
            },
            classes: ['clickable']

        });
    }

    openModal(word) {

        this.modal.open(TopWordsModalComponent, {

            width: '1020px',
            data: { report: this.report, word: word }

        });

    }


}

但是，当它尝试调用时，this.openModal()我收到以下错误：

core.js:1448 错误类型错误：this.openModal 不是一个函数在 Object.click (top-words.component.ts:79) at HTMLDivElement.wordcloudclick (wordcloud2.js:440) at ZoneDelegate.invokeTask (zone.js: 421) 在 Object.onInvokeTask (core.js:4740) 在 ZoneDelegate.invokeTask (zone.js:420) 在 Zone.runTask (zone.js:188) 在 ZoneTask.invokeTask [as invoke] (zone.js:496)在 invokeTask (zone.js:1517) at HTMLDivElement.globalZoneAwareCallback (zone.js:1543)

console.log 给出了单词 object。

{list: Array(100), fontFamily: "Times, serif", fontWeight: "normal", color: ƒ, minSize: 0, …}

你能看到它是如何引用“对象点击”我相信“这个”属性被分配给回调对象而不是我的组件，所以我无法调用另一个函数。

这里的解决方案是什么？

Answer 1

使用箭头函数即() =>代替function关键字。带有function关键字的方法有自己的this上下文，并隐藏对类属性/方法的访问，而不是箭头函数。

如 Mozilla Web Docs 所述：

箭头函数表达式的语法比函数表达式短，并且没有自己的 this、arguments、super 或 new.target。这些函数表达式最适合非方法函数，它们不能用作构造函数。

将您的代码更改为以下内容：

generateWordCloud(words) {
    WordCloud(document.getElementById('word_cloud'), {
        list: words,
        click: (data) => {
            console.log(this);
            this.openModal(data);
        },
        classes: ['clickable']
    });
}