Angular 6，Materialize：初始化 javascript答案

【问题标题】：Angular 6, Materialize: initializing javascriptAngular 6，Materialize：初始化 javascript
【发布时间】：2018-10-11 21:31:39
【问题描述】：

我是 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();
  });

我已经通过节点安装了 Materialize。我的 angular.json 文件夹中有它的 CSS 和 JS 作为依赖项。 CSS样式有效。我已经在我的组件中的ngOnInit 生命周期挂钩中尝试了这三种方法。无法识别“M”。我尝试导入物化：

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

和

let m = materialize;

但这也没有用。

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

【问题讨论】：

在stackblitz.com 上分享您的代码？试试这个 import 'materialize-css';

标签： javascript jquery angular typescript materialize

【解决方案1】：

您应该使用 Materialize for Angular 库。询问如何将 jQuery 与 Angular 一起使用可能会让你投下很多反对票。

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

【讨论】：

我不想使用 jquery。我提到它只是因为在第一种初始化方法之后似乎不起作用。我将 Materialize 库用于 Angular。

【解决方案2】：

从@angular/core库导入OnInit
declare const M: any; 在导入下
在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();
  }

}

【讨论】：

【解决方案3】：

从'@angular/core'导入{组件，OnInit}；声明 var M: any;

【讨论】：

这是一个所谓的纯代码答案，没有解释为什么它没有帮助。学习格式化也是有益的将tour 视为一种幸运符，并阅读How to Answer。