调用角度分量对象的问题

Question

我正在尝试实现jitsi的以下事件处理程序，以满足角度组件内部的外部api“ handleVideoConferenceJoined”。在此处理程序方法内，我们能够通过关键字“ this”访问Jitsi对象，但无法访问angular的组件对象。 任何帮助将不胜感激。

示例代码。

import { Component, OnInit, ViewChild, Renderer2, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { EventEmitter } from 'events';
import { TutorService } from 'app/tutor/tutor.service';
import '../../vendor/jitsi/external_api.js';
import { JitsiService } from 'app/jitsi/jitsi.service.js';
import { StudentService } from 'app/student/student.service.js';
import { StudentSchema } from 'app/student/student.js';

declare var JitsiMeetExternalAPI: any;

declare var chrome;
declare const $: any;

@Component({
  selector: "app-conference-cmp",
  templateUrl: "conference.component.html"
})
export class ConferenceComponent implements OnInit {
  tutor: Object;
  domain: string;
  options: any;
  api: any;
  studentId: string;
  student: StudentSchema;

  constructor(
    private route: ActivatedRoute,
    private tutorservice: TutorService,
    private studentService: StudentService,
    private jitsiService: JitsiService
  ) {
  }

  ngOnInit() {
    this.domain = "meet.jit.si";
    this.route.paramMap.subscribe(
      (params: ParamMap) => (this.studentId = params.get("id"))
    );

    this.studentService
      .getStudentsByStudentID(this.studentId)
      .subscribe(student => (this.student = student));
  }

  joinSession() {
    const roomName = `${this.tutor["first_name"]}_${
      this.student["first_name"]
    }`;
    this.options = {
      roomName: roomName,
      width: 800,
      height: 500,
      parentNode: document.querySelector("#jitsiVideo"),
      configOverwrite: {},
      interfaceConfigOverwrite: {
        // filmStripOnly: true,
        TOOLBAR_BUTTONS: [
          "microphone",
          "camera",
          "closedcaptions",
          "desktop",
          "fullscreen",
          "hangup",
          "profile",
          "chat",
          "recording"
        ]
      }
    };

    this.api = new JitsiMeetExternalAPI(this.domain, this.options);
    this.api.executeCommand("displayName", this.tutor["first_name"]);

    this.api.addEventListeners({
      readyToClose: this.unload,
      participantLeft: this.handleParticipantLeft,
      participantJoined: this.handleParticipantJoined,
      videoConferenceJoined: this.handleVideoConferenceJoined,
      videoConferenceLeft: this.handleVideoConferenceLeft
    });

    localStorage.setItem('tutor_id', this.tutor['id']);

    // save new room
    // this.jitsiService.addJitsiRoom(roomName, this.tutor['id']);
  }
  handleParticipantLeft(arg) {
    if (this.getNumberOfParticipants() === 1) {
      this.dispose();
    }
  }
  handleParticipantJoined(arg) {

  }
  handleVideoConferenceJoined(arg) {
    **how to access component object here to save session in db?**
        this.jitsiService.addJitsiRoom(roomName, this.tutor['id']);
  }
  handleVideoConferenceLeft(arg) {
  }

  unload() {
    if (this instanceof JitsiMeetExternalAPI) {
      this.dispose();
    }
    $("#jitsiVideo").html("");
  }
}