Angular 6，Materialize：初始化javascript

Question

我是 Angular 和 Materialise 的新手。 我正在嘗試在我的 Angular 組件中初始化一個輪播。

Materialise 提到了三種方式：

M.AutoInit();

或者

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

或者

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

我已經通過節點安裝了 Materialise。 我的 angular.json 文件夾中有它的 CSS 和 JS 作為依賴項。 CSS 樣式有效。 我在組件中的ngOnInit生命周期鈎子中嘗試了這三種方法。 無法識別“M”。 我嘗試導入物化：

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

和

let m = materialize;

但這也沒有奏效。

然后我將 jquery 安裝為依賴項並嘗試了該方法，但這似乎也不起作用。

Answer 1

您應該使用 Materialize for Angular 庫。 詢問如何在 Angular 中使用 jQuery 可能會得到很多反對。

https://www.npmjs.com/package/angular2-materialize

Answer 2

• 從@angular/core庫導入OnInit

• declare const M: any; 在進口之下

• 在ngOnInit()生命周期鈎子中ngOnInit() 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();
  }

}

Answer 3

從“@angular/core”導入 { Component, OnInit }; 聲明 var M: any;