Question

我认为这个问题与关键字“＃34;这个＆＃34;没有被分配到我认为的那样。

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

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

component.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 ERROR TypeError：this.openModal不是函数 at Object.click（top-words.component.ts：79）在HTMLDivElement.wordcloudclick（wordcloud2.js：440）在ZoneDelegate.invokeTask（zone.js：421） at Object.onInvokeTask（core.js：4740）在ZoneDelegate.invokeTask（zone.js：420）在Zone.runTask（zone.js：188）在ZoneTask.invokeTask [作为调用]（zone.js：496） at invokeTask（zone.js：1517）在HTMLDivElement.globalZoneAwareCallback（zone.js：1543）

并且console.log给出了单词object。

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

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

这里有什么解决方案？

Answer 1

使用arrow function，即 () => ，而不是 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']
    });
}

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

1 个答案: