5

我已经从这个链接下载了一个主题。我必须在 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();
});

问题是我可以在页面重新加载时调用该函数，但在内容加载时无法调用该函数。

谁能帮我解决这个问题？任何帮助，将不胜感激。

4

4 回答 4

23

您可以在 Angular 应用程序中使用 javascript。

步骤 1.在assets/javascript文件夹中创建demo.js文件。

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

步骤 2.在assets/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 文件名要相同

于 2017-11-17T10:29:54.267 回答
0

在 Angular4, 5 项目文件夹中，有 .angular-cli.json 文件。

在文件中，您将看到

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

将您的外部 js 文件路径推送到数组中。

于 2017-11-17T08:58:14.640 回答
0

您需要更改加载 JavaSciprt 文件的顺序。尝试加载common.js之前main......js。您的脚本尝试从尚未加载的文件中访问函数。尝试切换这两行代码：

<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>
于 2017-11-17T08:57:02.077 回答
-1

您可以通过窗口对象调用这些方法-

document.addEventListener("DOMContentLoaded", function (event) {
      window['navbarToggleSidebar']();
      window['navActivePage']();
 });
于 2017-11-17T10:38:31.000 回答