在Angular 10中实现-已应用CSS，但未执行JS

问题描述

我是Angular和Materialize的新手。我正在尝试在Angular组件中初始化轮播。

我已经安装了Materialize-css，并在angular.json中包含了CSS和js。

CSS可以完美地工作，但是js不能工作，包括模式，轮播等。sidenav的工作是在index.js中添加M.AutoInit()。

这是component.html：

<div class="row">
  <div class="col l4 m6 s12" *ngFor="let field of fields">
    <div class="carousel">
      <a class="carousel-item" href="#one!"><img [src]="'http://localhost:3000/'+field.imagePath"></a>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded',function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems);
  });
</script>

这是组件。

import { Component,OnInit  } from '@angular/core';
import { FieldService } from '../../services/field.service'

declare const M: any;

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

export class MainComponent implements OnInit {

  fields= [];

  constructor(
    private fieldService: FieldService,) { }

  ngOnInit(): void {
    M.AutoInit();
    this.fieldService.getFields()
      .subscribe(
        res => {
          console.log(res)
          this.fields = res;
        },err => console.log(err))
  }
}

我尝试将const M声明为any并在ngOnInit中添加M.AutoInit（），但仍然无法正常工作。

解决方法

已解决TH JS isue问题，将declare const M: any;替换为impoert* as M from 'materialize.css/js/materialize.min.js，但是轮播刺激无效。

您必须在 angular.json 上添加 materialize js 脚本。

"scripts": [
              "node_modules/materialize-css/dist/js/materialize.min.js"
            ]

angular angular materialize