角2：コンポーネントから外部jsファイル変数にアクセス可能

Question

コンポーネントに外部jsファイルをインポートしようとしています。

external.js

var x=9; 

component.ts

import '../../assets/api/external.js'; 
declare let x: any; 
.... 
console.log(x); 

と私が取得：

ERROR ReferenceError: x is not defined 

にはどうすればいいのコンポーネントからのxにアクセスすることができますか？ jsファイルを見つけることができないと不平を言うことはありません。

Answer 1

angle-cli.jsonにスクリプトをグローバルスクリプトとして追加してください。

"scripts": [ 
"../external.js", 
"../node_modules/.....min.js", 
"../node_modules/jspdf-autotable/dist/....js" 
], 

これが役立つかどうかをお知らせください。 参考リンクは次のとおりです。jsjsあなたのコンポーネントに関数やクラスをエクスポートしませんでした。https://github.com/angular/angular-cli/wiki/stories-global-scripts

Answer 2

インポート用 MDNインタフェースはimport 'module_name'を購読：

は何もインポートせず、唯一の副作用のために全体のモジュールをインポートします。モジュールのグローバルコードが実行されますが、実際には値はインポートされません。

したがって、クラスまたは関数を追加してからエクスポートしてください。

Answer 3

Angularアプリケーションのanthoerスクリプトからvaribaleを呼び出すことができます。

手順1. assests/javascriptフォルダにdemo.jsファイルを作成します。

export function test1(){ 
    console.log('Calling test 1 function'); 
} 

ステップ2. assests/javascriptフォルダにdemo.d.tsファイルを作成します。

export declare function test1(); 

ステップ3.

//User defined file path 
import { test1 } from '../assets/javascript/demo'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    constructor() { 
    console.log(test1()); 
    } 
} 

注コンポーネントで使用してください：JSと.d.tsファイル名は、角のCLI JSONで