javascript - Angular 6，物化 : initializing javascript

Question

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

Materialize 提到了三种方式:

M.AutoInit();

或

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

或

  $(document).ready(function(){
    $('.carousel').carousel();
  });

我已经通过节点安装了 Materialise。我将它的 CSS 和 JS 作为依赖项放在我的 angular.json 文件夹中。 CSS 样式有效。我已经在组件的 ngOnInit 生命周期 Hook 中尝试了这三种方法。 “M”不被识别。我尝试导入具体化:

import { materialize } from '../../../node_modules/materialize-css'

和

let m = materialize;

但这也没有奏效。

然后我安装了 jquery 作为依赖项并尝试了该方法，但这似乎也不起作用。

Answer 1

• 从@angular/core库导入OnInit

• 在导入下声明 const M: any;

• 在 ngOnInit() 生命周期 Hook 中触发 M.AutoInit() 函数

示例(其中组件名称为 MediaComponent):

import { Component, OnInit } from '@angular/core';

declare const M: any;

@Component({
  selector: 'app-media',
  templateUrl: './media.component.html',
  styleUrls: ['./media.component.scss']
})
export class MediaComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    M.AutoInit();
  }

}