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

Question

我是 Angular 和 Materialise 的新手。我正在尝试在我的 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>

这是component.ts

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() 但仍然无法正常工作。

Answer 1

TH JS 问题已解决，将 declare const M: any; 替换为 impoert* as M from 'materialize.css/js/materialize.min.js，但轮播仍然无法正常工作。

Answer 2

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

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

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

Materialize in Angular 10 - CSS being applied, but JS not executing

materialize

angular