使用Angular4

Question

使用Angular4从外部文件调用方法名称时出现以下错误。

错误：

ERROR in src/app/about/about.component.ts(22,9): error TS2304: Cannot find name 'checkJS'.

我在下面提供我的代码。

about.componet.html：

<ul class="nav navbar-nav">
      <li class="active"><a routerLink ='/'>Home</a></li>
      <li class="active"><a [routerLink] = "['/about', 'http://example.com/jslib/jslib.js']" routerLinkActive="active">About</a></li>
    </ul>

这里我在URL中传递外部文件路径。

about.componet.ts：

import { Component, OnInit,AfterViewChecked } from '@angular/core';
import {Http,Response,Headers} from '@angular/http';
import {ActivatedRoute} from '@angular/router';
import {Router} from '@angular/router';
import 'rxjs/add/operator/toPromise';
declare var jquery:any;
declare var $ :any;
@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
  private headers = new Headers({'Content-Type':'application/json'});
  aboutData = [];
  filePath:string;
  constructor(private router:Router,private route:ActivatedRoute,private http:Http) { }
  ngAfterViewChecked() {
    $('#title').attr('style','font-weight:bold');
    $.getScript(this.filePath,function(){
      setTimeout(function(){
        checkJS();
      }, 5000);
    })
  }
  ngOnInit() {
    this.route.params.subscribe(params=>{
        this.filePath = params['filepath'];
    });
    this.http.get('http://localhost:3000/articles').subscribe(
      (res:Response)=>{
        this.aboutData = res.json();
      }
    )
  }
}

这是我的外部.js文件代码。

var script = document.createElement("SCRIPT");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js");
document.getElementsByTagName("head")[0].appendChild(script);

window.onload = function () {
    if (typeof (jQuery) != "undefined") {
        checkJS();
    }
}
function checkJS(){
 $('#title').html('LOADED CONTENT FROM REMOTE FILE');
}

我从上面给出的外部.js文件中调用该函数（i.e-checkJS）但在编译时遇到错误。

Answer 1

您必须在类外部手动声明该函数，以便TypeScript知道它存在：

declare function checkJS();

您的文件应如下所示：

import { Component, OnInit,AfterViewChecked } from '@angular/core';
import {Http,Response,Headers} from '@angular/http';
import {ActivatedRoute} from '@angular/router';
import {Router} from '@angular/router';
import 'rxjs/add/operator/toPromise';
declare var jquery:any;
declare var $ :any;
declare function checkJS();
@Component({
    selector: 'app-about',
    templateUrl: './about.component.html',
    styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
    private headers = new Headers({'Content-Type':'application/json'});
    aboutData = [];
    filePath:string;
    constructor(private router:Router,private 
        route:ActivatedRoute,private http:Http) { }
    ngAfterViewChecked() {
        $('#title').attr('style','font-weight:bold');
        $.getScript(this.filePath,function(){
            setTimeout(function(){
                checkJS();
            }, 5000);
        })
    }
    ngOnInit() {
        this.route.params.subscribe(params=>{
        this.filePath = params['filepath'];
    });
    this.http.get('http://localhost:3000/articles').subscribe(
        (res:Response)=>{
            this.aboutData = res.json();
        }
      )
    }
}

看看第8行。