Angular 9 服务变量在函数调用后更改为未定义，在同一文件中

Question

我有一个这样定义的接口：

export interface Action {
    (...args: any[]): void;
}

这样定义的服务：

import { uuid } from 'uuidv4';
import { Action } from '../interfaces/action';
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class SocketService {
    private onMessage: Action[] = [];
    private socket: WebSocket = null;

    constructor() {
        this.socket = new WebSocket('ws://localhost:8080/1234');

        this.socket.onopen = this.OnOpen;
        this.socket.onmessage = this.OnMessage;
    }

    private OnMessage(message) {
        let json = JSON.parse(message.data);

        console.log(this.onMessage);
        if (this.onMessage) {
            this.onMessage.map((x) => x(json));
        }
        console.log(json);
    }

    public set OnMessageActions(action: Action) {
        console.log(this.onMessage);
        this.onMessage.push(action);
        console.log(this.onMessage);
    }

    private OnOpen() {
        console.log(this.onMessage);
        console.log('Connection opened');
        console.log(this.onMessage);
    }
}

最后一个组件定义如下：

import { Component, OnInit } from '@angular/core';
import { SocketService } from '../../services/socket.service';

@Component({
    selector: 'app-chat',
    templateUrl: './chat.component.html',
    styleUrls: ['./chat.component.scss'],
})
export class ChatComponent implements OnInit {
    messages: Object[] = [];

    public get ReadyState(): number {
        return this.socketService.Socket().readyState;
    }

    constructor(private socketService: SocketService) {}

    ngOnInit(): void {
        if (!this.socketService.Socket()) {
            return;
        }

        this.socketService.OnMessageActions = this.OnMessage;
    }

    OnMessage(message: any) {
        switch (message.type) {
            case 'history':
                this.messages = message.data;
                break;
        }
    }
}

当调用 setter 函数时，第一个控制台日志显示一个空数组，这是预期的，推送发生并且第二个控制台日志显示一个包含 1 项的数组。再次，预期。

问题是，当调用 OnOpen 和 OnMessage 函数时，数组未定义。

Actions 接口背后的逻辑是我试图从 C#s/Unity 的操作中反映出来的。

Answer 1

因为 this 函数中的上下文 OnOpen 没有引用 SocketService 实例

让我们尝试像这样重写您的 OnOpen 函数

OnOpen = () => {
     const _this = this
     console.log(_this.onMessage)
}

Angular 9 服务变量在函数调用后更改为未定义，在同一文件中

Angular 9 service variable changes to undefined after function call, within the same file

javascript

typescript

angular-services

angular