时间戳

首页 > 解决方案 > 如何在不同的组件上使用 jQuery（Angular CLI）

javascript - 如何在不同的组件上使用 jQuery（Angular CLI）

问题描述

我有两个不同的页面（主页、主页面），但是当路由、外部 CSS（Materialize）和其他一切正常时，我无法在它们的 component.ts 文件中初始化 javascript。

例如，这是我的 home.component.ts 文件，用于简单的可折叠

import { Component, OnInit } from '@angular/core';
declare let $: any;

@Component({
 selector: 'app-home',
 templateUrl: 'home.component.html',
 styleUrls: ['home.component.css']})

export class HomeComponent implements OnInit {
 title = 'untitled3';

 ngOnInit() {  $(document).ready(function() {
   $('.collapsible').collapsible();
 });

}}

还有 home.component.html 文件

<ul class="collapsible">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body"><span>test</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
    <div class="collapsible-body"><span>test</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
    <div class="collapsible-body"><span>test.</span></div>
  </li>
</ul>

索引.html

<html>
<head>
  <meta charset="utf-8">
  <title>Untitled3</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<script src="/node_modules/materialize-css/dist/js/materialize.min.js"></script>
<script src="/node_modules/popper.js/dist/popper.min.js"></script>
<script src="/node_modules/hammerjs/hammer.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<app-root></app-root>
</body>
</html>

并在 angular.json 文件中

... 

"styles": [
              "src/styles.css",
              "node_modules/materialize-css/dist/css/materialize.css"
            ],
            "scripts": ["node_modules/jquery/dist/jquery.js",
                        "node_modules/materialize-css/dist/js/materialize.js",
                        "node_modules/popper.js/dist/popper.min.js",
                        "node_modules/hammerjs/hammer.min.js"]

...

当我只使用 app.component 文件时不会发生这种情况，那么如何在特定页面中运行脚本？

标签： javascriptjqueryhtmlangularmaterialize

解决方案

我最初建议您在尝试在函数 ngOnInit 中使用 document.ready 函数时仔细阅读 Angular 的文档 - 这已经表示组件的加载。有关生命周期函数的更多信息将有所帮助。

接下来回答您的问题 - 要使用 JQuery，Angular 中有多种方法。最好的方法是使用 npm 安装它，然后导入它。

npm install jquery --save

要导入：

import * as $ from 'jquery';

然后你可以像在 jquery 中一样使用 $ 。但是，请正确理解角度文档。通常建议在 Angular 中避免使用 jquery，因为 Angular 通常内置了所有功能。

您可以在此参考中找到有关该解决方案的更多详细信息

推荐阅读