외부 JS 파일에서 각도 요소로 메서드 호출

Question

SCORM 콘텐츠를 재생하는 전자 학습 응용 프로그램을 개발 중입니다. 나는 각도와 폭풍에 상당히 새로운 사람입니다. 각도 4와 스프링 부트를 사용하고 있습니다. SCORM 콘텐츠에 백엔드 API를 노출하는 데 어려움을 겪고 있습니다.

이들은

는 지금까지 시도 무엇 :

아래의 코드보기 코스 - content.ts은 SCO가 LMS와 통신 할 수 inorder를 자바 스크립트 파일에서 호출합니다 모든 8 SCORM 방법이있다.

보기 코스 - 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 내가 노출하는 방법을 알아낼 수 없었다

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

LMS에와 통신 할 수 있도록 할 것이라는 전화입니다 view-course-content.ts에서 위의 js에 SCORM 메소드는 SCORM 컨텐트를 만들 것이라고 부릅니다.

view-course-content.ts는 호출해야하는 Javascript API입니다. js 파일로 작성한 호출을 캡처하고 view-course-content.component.ts의 메소드로 리디렉션 할 수 있습니까? 나는이 호출을하고있는 js 파일에는 아무런 통제권이 없다.

도움이 될 것입니다! 감사. 등 API.Initialize를(), 가정

Answer 1

view-course-content.component에서 API를 공개 할 수있었습니다.다음과 같은 ngOnInit 기능에서 TS 파일 :

api_1484_11 모두 8 API 호출을 구현했고, 뷰 코스-content.ts 파일에 주입 또 다른 각도 구성 요소입니다

window["API_1484_11"] = this.api_1484_11 

.

Answer 2

이 모든 window에 연결되어, 당신은 할 수 있어야한다 :

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

당신은 각도 서비스로 이러한 호출을 모두 넣고 다음에 그것을 주입 할 수

API 개체와 통신해야하는 모든 구성 요소. 이러한 내가 전에 create a service에 각도의 튜토리얼의 단계를 수행 한

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

서비스

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

구성 요소
, 등. 그것은 꽤 잘 풀리는 것처럼 보였다.