Javascript 如何在不同组件上使用jQuery（Angular CLI）

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

e、 这里是我的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>

---

如果我只使用app.component文件，则不会发生这种情况，因此如何在特定页面中运行脚本？

我建议您在尝试使用函数ngOnInit中的document.ready函数时，先阅读Angular的文档，因为该函数已经表示加载了组件。有关生命周期功能的更多信息将非常有用

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

npm install jquery --save

要导入：

import * as $ from 'jquery';

然后您可以像在jquery中一样使用$。但是，一定要正确理解角度文档。通常建议避免使用Angular中的jquery，因为Angular通常内置了所有工具

---

您可以在本

中找到有关该解决方案的更多详细信息，作为一般参考，将jQuery和Angular结合使用并不被认为是好的做法。只坚持其中一个。

npm install jquery --save

import * as $ from 'jquery';