Appel d'une méthode dans un composant angulaire à partir d'un fichier JS externe

Question

Je développe une application d'apprentissage en ligne qui lit le contenu SCORM. Je suis assez nouveau pour angulaire et scorm. J'utilise angulaire 4 et botte de ressort. Je rencontre des difficultés pour exposer l'API backend au contenu SCORM.

Ce sont ce que je l'ai essayé jusqu'à présent:

Le code ci-dessous vue-cours-content.ts a toutes les 8 méthodes SCORM que l'OCS invoquera à partir d'un fichier javascript afinde pour communiquer avec le LMS.

vue-cours-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"; 
} 

}

Le code ci-dessous lance en fait le contenu SCORM. Je l'ai mis dans un cadre.

vue-cours-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> 

Les cours sont lancés à partir du tableau de bord.

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> 

Ce sont les appels que l'OCS fera de communiquer avec le LMS

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

Je n'ai pas été en mesure de comprendre comment exposer la SCORM méthodes dans view-course-content.ts aux appels js ci-dessus que le contenu SCORM fera.

view-course-content.ts est mon API Javascript qui doit être appelée. Comment puis-je capturer les appels effectués par le fichier js et le rediriger vers les méthodes dans view-course-content.component.ts? Je n'ai aucun contrôle sur le fichier js qui effectue ces appels.

Toute aide sera grandement appréciée! Merci.

Answer 1

J'ai été en mesure d'exposer l'API dans le composant view-course-content.component.fichier ts dans la fonction ngOnInit comme ci-dessous:

window["API_1484_11"] = this.api_1484_11 

où api_1484_11 est un autre élément angulaire qui avaient tous les 8 appels API mises en œuvre et injecté dans le fichier vue-cours-content.ts.

Answer 2

En supposant API.Initialize(), etc., sont tous attachés à window, vous devriez être en mesure de le faire:

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

Vous pouvez mettre tous ces appels dans un service angulaire puis injecter pour tous les composants qui doivent communiquer avec l'objet API. Tels que,
service

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

Component

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

J'ai suivi les étapes décrites dans le tutoriel angulaire create a service avant. Cela a semblé fonctionner plutôt bien.