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

Question

我正在开发一个播放SCORM内容的电子学习应用程序。我对角度和scorm相当陌生。我正在使用角度4和弹簧引导。我正在面临将后端API暴露给SCORM内容的困难。

这些是我迄今为止尝试：

下面的代码视图当然，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文件。

任何帮助将不胜感激！谢谢。

Answer 1

我能够在view-course-content.component中公开API。在像下面的ngOnInit函数TS文件：

window["API_1484_11"] = this.api_1484_11 

其中api_1484_11是另一个角度分量即把所有的8个API调用来实现并注入视图道-content.ts文件。

Answer 2

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