代码之家 › 专栏 › 技术社区 › Kay

Angular调用click回调函数中的另一个函数(this)[重复]

angular-material2 angular-material angular

Kay · 技术社区 · 6 年前

我认为这个问题与关键字“this”没有被分配到我假设的内容有关。

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

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

组成部分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() 我得到以下错误:

果心js:1448错误类型错误:此。OpenModel不是一个函数 at对象。单击(顶部单词。组件。ts:79) 在HTMLDivelment。wordcloudclick(wordcloud2.js:440) 在ZoneDelegate。invokeTask(zone.js:421) at对象。onInvokeTask(core.js:4740) 在ZoneDelegate。invokeTask(zone.js:420) 在区域。runTask(zone.js:188) 在ZoneTask。invokeTask[作为invoke](zone.js:496) 在invokeTask(zone.js:1517) 在HTMLDivelment。globalZoneAwareCallback(区域js:1543)

和控制台。log给出单词object。

{list: Array(100), fontFamily: "Times, serif", fontWeight: "normal", color: Æ, minSize: 0,Â â¦}

你能看到它是如何引用“object click”的吗?我相信“this”属性是分配给回调对象的,而不是我的组件,所以我无法调用其他函数。

这里的解决方案是什么?

1 回复 | 直到 6 年前

FAISAL 6 年前

使用 arrow function i、 e。 () => 而不是 function 关键字。具有 作用 关键字有自己的 this 上下文并隐藏对类属性/方法的访问,而不是对箭头函数的访问。

如Mozilla Web文档所述:

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

将代码更改为以下内容:

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