我有两个不同的页面（主页，主页），但是尽管路由，外部CSS（材料化）和其他所有功能都正常，但是我无法在他们的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>
index.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文件时不会发生，那么如何在特定页面中运行脚本？
我最初建议您在尝试使用ngOnInit函数中的document.ready函数时仔细阅读Angular文档-该函数已经表示已加载组件。有关生命周期功能的更多信息将很有帮助。
接下来回答您的问题-要使用JQuery，Angular中有多种方法。最好的方法是使用npm安装它，然后将其导入。
npm install jquery --save
要导入：
import * as $ from 'jquery';
然后您可以像在jquery中一样使用$。但是，请正确理解角度文档。通常建议避免在Angular中使用jquery，因为Angular通常内置了所有功能。
您可以在此reference中找到有关解决方案的更多详细信息