Question

我正在开发一个播放SCORM内容的电子学习应用程序。我对角度和scorm相当新。我使用角4和弹簧靴。我在将后端API暴露给SCORM内容时遇到了困难。

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

以下代码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是我需要调用的Javascript API。如何捕获js文件的调用并将其重定向到view-course-content.component.ts中的方法？我无法控制正在进行这些调用的js文件。

任何帮助将受到高度赞赏！感谢。

Answer 1

假设API.Initialize（）等都附加到window，您应该可以这样做：

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

您可以将所有这些调用放入角度服务中，然后将其注入需要与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();
   }
}

之前我已经按照角度教程中的步骤create a service进行了操作。它似乎运作得很好。

Answer 2

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

window["API_1484_11"] = this.api_1484_11

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

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

2 个答案: