У меня есть две разные страницы (главная, главная), однако, хотя маршрутизация, внешний CSS (Materialize) и все остальное работает нормально, я не могу инициализировать JavaScript в их файлах component.ts.
, напримервот мой файл 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, так как я могу запускать сценарии на определенных страницах?