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

Question

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

这是我要使用的代码：

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

Answer 1

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

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

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

Answer 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.

中使用它

Answer 3

第 1 步：在 assets 文件夹中创建一个 js 文件夹。

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

Step-3: 在脚本数组中的 angular.json 中添加 example.js 的路径。

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

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

How can I use JavaScript code in Angular 7?