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

【问题标题】：How can I use JavaScript code in Angular 7?如何在 Angular 7 中使用 JavaScript 代码？
【发布时间】：2018-11-26 13:36:30
【问题描述】：

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

这是我要使用的代码：

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

【问题讨论】：

【解决方案1】：

Step-1：在 assets 文件夹中创建一个 js 文件夹。

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

Step-3：在scripts数组中的angular.json中添加example.js的路径。

Step-4：在需要该函数的 component.ts 文件中声明 example.js 中创建的 js 函数。

第 5 步：调用 ngOnInIt() 中声明的函数。

【讨论】：

【解决方案2】：

安装jQuerynpm install jquery
安装 MaterializeCSS npm install materialize-css@next
安装类型npm install --save @types/materialize-css @types/jquery
打开angular.json，找到scripts字段
在数组中添加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"
]

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

您可以在 ngOnInit 中使用它。

【讨论】：

得到这个错误TypeError: $(...).sidenav is not a function
我已经在数组中实现了脚本，但仍然出现同样的错误
你安装类型了吗？在angular.json 中有2 个scripts 字段。
是的，我都做了。
确保 jQuery 在数组中排在第一位，然后是 MaterializeCSS。 angular.json 中的更改需要您重新启动 web 服务。所以只需停止并再次开始角度。 @harshitraghav

【解决方案3】：

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

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

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

【讨论】：