物化 css 轮播在 Angular 中不起作用答案

【问题标题】：Materialize css carousel doesn't work in Angular物化 css 轮播在 Angular 中不起作用
【发布时间】：2020-10-02 11:00:18
【问题描述】：

我是 Angular 的新手并且我遇到了一个问题。我成功地将物化导入到 Angular 中，物化 css 元素可以工作，但 js 元素不能。轮播和其他元素（例如选择）不会出现在我的组件中。只是一个空位。

这里是 package.json

  "private": true,
  "dependencies": {
    "@angular/animations": "^10.0.14",
    "@angular/common": "~10.0.11",
    "@angular/compiler": "~10.0.11",
    "@angular/core": "~10.0.11",
    "@angular/forms": "~10.0.11",
    "@angular/platform-browser": "~10.0.11",
    "@angular/platform-browser-dynamic": "~10.0.11",
    "@angular/router": "~10.0.11",
    "@mdi/font": "^5.6.55",
    "@tinymce/tinymce-angular": "^4.2.0",
    "materialize-css": "^1.0.0-rc.2",
    "ngx-materialize": "^6.1.3",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.7",
    "@angular/cli": "~10.0.7",
    "@angular/compiler-cli": "~10.0.11",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

这里是 angular.json

"styles": [
              "src/styles.css",
              "node_modules/materialize-css/dist/css/materialize.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
   "node_modules/materialize-css/dist/js/materialize.min.js",
   "node_modules/@mdi/font/css/materialdesignicons.min.css"
            ]
          },

这是我的组件

import { Component, Input, OnInit } from '@angular/core';
declare const M: any;

@Component({
  selector: 'app-recommended-posts',
  templateUrl: './recommended-posts.component.html',
  styleUrls: ['./recommended-posts.component.css']
})
export class RecommendedPostsComponent implements OnInit {



  constructor) { }

  ngOnInit(): void {
    
    M.AutoInit();
    
   }
 
}

和html文件：

<div class="carousel">
    <a class="carousel-item" href="#one!">test message</a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
  </div>

我尝试将 js 代码放入 html 页面，甚至是来自 materilize 网站的 jquery 代码。但也无济于事。

这个解决方案我在这个网站上查了一个问题，但结果是一样的。

一切似乎都是进口的，但我不知道为什么它不起作用。我的错误是什么？谢谢！

【问题讨论】：

标签： javascript angular materialize

【解决方案1】：

看看这个例子（它不是我的）。我认为这个问题是您正在从 ngOnInit 初始化轮播，但现在还为时过早，因为此时不会呈现子组件。

https://stackblitz.com/edit/angular-materialize-carousel?file=src%2Fapp%2Fapp.component.ts

【讨论】：

它开始工作，但是，由于这个导入行，我收到一个错误。它是红色的“import M from 'materialize-css';”表示它不是一个模块。我能做些什么呢？感谢您的帮助！
如何使用 import * as M from 'materialize-css';
但是我遇到了另一个问题。没有 *ngFor 它可以工作，但它会停止工作，只是一个空白页。为什么会这样？