如何在Angular 7中使用JavaScript代码？

Question

在移动屏幕上使用时，我正在尝试借助MaterializeCSS创建可折叠的导航栏，并且需要在其中使用JavaScript代码。 我应该在哪里编写这段JavaScript代码？

这是我要使用的代码：

**$(document).ready(function(){
    $('.sidenav').sidenav();
  });**

Answer 1

第1步：在资产文件夹中创建了一个js文件夹。

步骤2：在js文件夹中创建了一个新的.js文件。资产-> js-> example.js

第3步：在scripts数组内的angular.json中添加了example.js的路径。

第4步：在需要该功能的component.ts文件中声明了在example.js中创建的js函数。

第5步：调用ngOnInIt（）中声明的函数。

Answer 2

1. 安装jQuery npm install jquery
2. 安装MaterializeCSS npm install materialize-css@next
3. 安装类型npm install --save @types/materialize-css @types/jquery
4. 打开angular.json并找到scripts字段
5. 在数组中添加node_modules/jquery/dist/jquery.min.js和node_modules/materialize-css/dist/js/materialize.min.js：

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/materialize-css/dist/js/materialize.min.js"
]

1. 转到您的组件并在顶部declare var jQuery: any;
处添加

示例

(function ($) {
    $('.sidenav').sidenav();
})(jQuery);

您可以在ngOnInit中使用它。

Answer 3

找到并打开angular.json，然后将下一个字段添加到projects.architect.build.options对象并将文件路径更改为您自己的文件路径：

"scripts": [
  "path/to/js/you/want/use.js"
]

Angular会将这些自定义文件添加到结果构建中