2017-10-20 82 views
0

我正在開發一個播放SCORM內容的電子學習應用程序。我對角度和scorm相當陌生。我正在使用角度4和彈簧引導。我正在面臨將後端API暴露給SCORM內容的困難。從外部JS文件調用角度組件的方法

這些是我迄今爲止嘗試:

下面的代碼視圖當然,content.ts有所有8種SCORM方法,上海合作組織將在JavaScript文件序與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> 

這些都是調用,上海合作組織將與LMS

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

我一直無法弄清楚如何公開的溝通view-course-content.ts中的SCORM方法向上面的js調用SCORM內容。

view-course-content.ts是我的Javascript API,需要調用。 如何捕獲js文件所做的調用並將其重定向到view-course-content.component.ts中的方法?我無法控制進行這些調用的js文件。

任何幫助將不勝感激!謝謝。

回答

0

我能夠在view-course-content.component中公開API。在像下面的ngOnInit函數TS文件:

window["API_1484_11"] = this.api_1484_11 

其中api_1484_11是另一個角度分量即把所有的8個API調用來實現並注入視圖道-content.ts文件。

0

假設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。它似乎工作得很好。

+0

@ 1221076,謝謝你的評論。我對scorm內容和API交互的理解是scorm內容總是有一個普通的js,我應該能夠捕捉scorm內容從那個普通js發起的調用,我的理解是不正確的?我的主要問題是我無法從sco的純js中捕獲API.Initialize()調用。從您的評論中,我瞭解到我們正在從該組件啓動API調用。但這不是它的工作原理,內容應該初始化溝通,對吧?如果我錯了,請糾正我。 –