javascript - Materialise css 轮播在 Angular 中不起作用

Question

我是 Angular 的新手，在实现时我遇到了一个问题。我成功地将 Materialize 导入到 Angular 中，Materialize 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 代码放入其中。但也没有帮助。

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

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

Answer 1

看一下这个例子(不是我的)。我认为问题在于您正在从 ngOnInit 初始化轮播，但现在还为时过早，因为此时不会渲染子组件。

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