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

Question

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

这是我要使用的代码：

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

原文由 harshit raghav 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

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

原文由 harshit raghav 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 中使用它。

原文由 Oen44 发布，翻译遵循 CC BY-SA 4.0 许可协议