从外部 JS 文件调用 angular 组件中的方法

Question

我正在开发一个播放 SCORM 内容的电子学习应用程序。我是 angular 和 scorm 的新手。我正在使用 angular 4 和 spring 启动。我在向 SCORM 内容公开后端 API 时遇到困难。

这些是我到目前为止尝试过的：

下面的代码 view-course-content.ts 包含 SCO 将从 javascript 文件调用的所有 8 个 SCORM 方法，以便与 LMS 通信。

查看课程-content.component.ts

import { Component, OnInit, HostListener,ElementRef } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
import { LaunchService } from '../services/launch-service.service';
import { DataService } from '../services/data.service';
import { DomSanitizer } from '@angular/platform-browser';
import { ApiService } from '../services/api.service';
import { ViewChild } from '@angular/core';
//import { IndexComponent } from './../index/index.component'




@Component({
  selector: 'app-view-course-content',
  templateUrl: './view-course-content.component.html',
  styleUrls: ['./view-course-content.component.css']
})
export class ViewCourseContentComponent implements OnInit {

  pdfUrl;
  courseId;
  API;
  formData = new FormData();
  pdfSrc;
  api = 'http://localhost:8080';



  @ViewChild('API_1484_11') API_NN;
  @ViewChild('API') API_IE;
   @ViewChild('APIHOLDER') APIHOLDER;

  debug = true;




 constructor(private activatedRoute: ActivatedRoute, private dataService: DataService, private launchService: LaunchService, private _sanitizer: DomSanitizer, private apiService : ApiService,private elementRef: ElementRef) {
   console.log('Unit Id in viewCourse', this.dataService.unitId);  
  this.activatedRoute.params.subscribe((params: Params) => {
       this.courseId = params['id'];
      this.formData.append('courseId', params['id']);
      console.log(this.courseId);
    });
   }

  ngOnInit() {
    this.scormAPI = this._sanitizer.bypassSecurityTrustResourceUrl('assets/js/api.js');


  }


//------------------------------------------
//SCORM RTE Functions - Initialization
//------------------------------------------
Initialize(dummyString) { 
  console.log("Inside Initialize() function");
if (this.debug) { alert('*** LMSInitialize ***'); }
console.log("Inside Initialize() function");
//return this.API_1484_11.Initialize();
// return "true";

this.apiService.initialize().subscribe((response) => {
      console.log('Inside apiService Initialize call in view-course-component-ts ');
     // console.log("Response inside view course content", response['_body']);
})

}

//------------------------------------------
//SCORM RTE Functions - Getting and Setting Values
//------------------------------------------
GetValue(varname) {
if (this.debug) { 
 alert('*** LMSGetValue varname='+varname
                       +' varvalue=value ***');
}


}

LMSSetValue(varname,varvalue) {
if (this.debug) { 
 alert('*** LMSSetValue varname='+varname
                       +' varvalue='+varvalue+' ***');
}
}

 LMSCommit(dummyString) {
if (this.debug) { alert('*** LMSCommit ***'); }
return "true";
}

//------------------------------------------
//SCORM RTE Functions - Closing The Session
//------------------------------------------
LMSFinish(dummyString) {
if (this.debug) { alert('*** LMSFinish ***'); }
return "true";
}

//------------------------------------------
//SCORM RTE Functions - Error Handling
//------------------------------------------
LMSGetLastError() {
if (this.debug) { alert('*** LMSGetLastError ***'); }
return 0;
}

LMSGetDiagnostic(errorCode) {
if (this.debug) { 
 alert('*** LMSGetDiagnostic errorCode='+errorCode+' ***');
}
return "diagnostic string";
}

LMSGetErrorString(errorCode) {
if (this.debug) { 
 alert('*** LMSGetErrorString errorCode='+errorCode+' ***'); 
}
return "error string";
}

}

下面的代码实际启动了 SCORM 内容。我已经把它放在框架集中了。

查看课程-content.component.html

<script type="text/javascript"
  src="assets/runtime/BrowserDetect.js"></script>
    <!-- <script type="text/javascript"
    src="assets/js/SCORM_API_wrapper.js"></script>   -->
     <script type="text/javascript"
    src="assets/js/scormAPI.js"></script>
<div>  


   <div align="center"> View Course Content Page </div> 

     <div id="scormContent" *ngIf = "unitId == 2">

         <frameset frameborder="0" border="0" rows="0,*" cols="*" >


    <frame 
        src="assets/CourseImports/shared/launchpage.html"
        name="Content" id="Content" marginwidth="1px;" marginheight="1px;" noresize="noresize"></frame>



    </frameset>

课程从仪表板启动。

dashboard.component.html

<div class="container-fluid dashboard">
    <div class="row ">


        <h1 class="page-header page-heading animated fadeInDownBig">
            Courses<small></small>
        </h1>



        <div class="col-md-3 col-sm-6" *ngFor='let course of courses'>

            <div class="widget widget-stats bg-aqua-lighter">
                <div class="stats-icon">
                    <i class="fa fa-desktop:before"></i>
                </div>
                <a target="_blank" href="javascript:void(0);"
                    (click)="viewCourse(course.courseId)">

                    <div class="img-hover">
                        <img src="api/admin/getCourseCoverImage{{course.courseId}}"
                            id="coverImage" alt="HTML5 Image" height="70px" width="120px"
                            class="img-responsive img-rounded" />
                    </div>
                </a>

                <div class="stats-info">
                    <!-- <p id="testId_${publishedTestSurvey.testDetails.testId}">${publishedTestSurvey.testDetails.testName}</p>
                                        <h4>${fn:length(publishedTestSurvey.testDetails.testQuestionDetailsSet)}
                                            questions | ${publishedTestSurvey.testDetails.duration}
                                            Minutes | ${publishedTestSurvey.testDetails.testRepetitions}
                                            Total Attempts</h4> -->
                    <p>{{course.courseName}}</p>
                    <div class="stats-link">
                        <!-- <a target="_blank" href="view-course/{{course.courseId}}" (click)="viewCourse(course.courseId)">  
                                                Open Course <i class="fa fa-arrow-circle-o-right"></i>
                                            </a> -->
                        <!-- <a target="_blank" href="javascript:void(0);" (click)="viewCourse(course.courseId)">  
                                                Open Course <i class="fa fa-arrow-circle-o-right"></i>
                                            </a> -->
                    </div>
                </div>
            </div>
        </div>

    </div>    
</div>

这些是 SCO 将与 LMS 进行通信的调用

API.Initialize()
API.SetValue()
API.GetValue()
API.Terminate()
API.GetLastError()
API.GetErrorString()
API.GetDiagnostic()

我一直无法弄清楚如何将 view-course-content.ts 中的 SCORM 方法公开给 SCORM 内容将进行的上述 js 调用。

view-course-content.ts是我的JavascriptAPI需要调用的。如何捕获js文件的调用并将其重定向到view-course-content.component.ts中的方法？我无法控制进行这些调用的 js 文件。

非常感谢任何帮助！谢谢。

Answer 1

假设 API.Initialize() 等都附加到 window，你应该能够做到：

(<any>window).API.Initialize();

您可以将所有这些调用放入一个 angular 服务中，然后将其注入到需要与 API 对象对话的任何组件中。比如，
服务

@Injectable()
export class MyService {
  initialize:string {
     return (<any>window).API.Initialize();
  }
}

组件

export class MyComponent implements OnInit {
   constructor(private myservice: MyService) {}
   ngOnInit() {
      this.myservice.initialize();
   }
}

我之前已经按照 angular 的教程中的步骤进行了 create a service。看起来效果还不错。

Answer 2

我能够在 ngOnInit 函数的 view-course-content.component.ts 文件中公开 API，如下所示：

window["API_1484_11"] = this.api_1484_11

其中 api_1484_11 是另一个 angular 组件，它实现了所有 8 个 API 调用并注入到 view-course-content.ts 文件中。

从外部 JS 文件调用 angular 组件中的方法

Calling a method in an angular Component from an external JS file

scorm

angular