web-dev-qa-db-ja.com

angular 5で外部JavaScript関数を呼び出す方法は？

this リンクからテーマをダウンロードしました。 index.htmlファイルでスクリプトとCSSを定義する必要があります。

index.html（ボディセクション）

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/main.85741bff.js"></script>
  <script type="text/javascript" src="./assets/js/common.js"></script>
</body>

Common.jsで関数を定義し、main.85741bff.jsファイルから呼び出します。

common.js（関数）

document.addEventListener("DOMContentLoaded", function (event) {
     masonryBuild();
     navbarToggleSidebar();
     navActivePage();
});

問題は、ページの再読み込み中に関数を呼び出すことができますが、コンテンツの読み込み中に関数を呼び出すことができないことです。

誰かがこの問題を解決するのを手伝ってくれる？任意の助けいただければ幸いです。

javascriptangulartypescriptangular5
4
Milan

AngularアプリケーションでJavaScriptを使用できます。

ステップ1. assemos/javascriptフォルダーにdemo.jsファイルを作成します。

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

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

export declare function test1();

ステップ3.コンポーネントで使用する

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のファイル名は同じである必要があります

18
Akshay Garg

Angular4、5プロジェクトフォルダーには、.angular-cli.jsonファイルがあります。

ファイルでは、

"apps": [
  {
    "scripts": []
  }
]

外部jsファイルのパスを配列にプッシュします。

0
Songwon Park

JavaSciprtファイルをロードする順序を変更する必要があります。ロードしてみてくださいcommon.js 前 main......js。スクリプトは、まだロードされていないファイルから関数にアクセスしようとします。次の2行のコードを切り替えるだけです。

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/common.js"></script>
  <script type="text/javascript" src="./assets/js/main.85741bff.js">/script>
</body>
0
VTodorov