Блог

Я новичок в Angular и materialize, и я столкнулся с проблемой. Я успешно импортировал materialize в Angular, элементы materialize css работают, а элементы js — нет. Carousel и другие элементы, такие как select, не отображаются в моем компоненте. Просто пустое место.

Вот 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-страницу и даже код jquery с веб-сайта materilize. Но тоже не помогает.

Это решение я просмотрел на вопрос на этом сайте, но результат тот же.

Кажется, что все импортировано, но я не знаю, почему это не работает. В чем моя ошибка? Спасибо!

Взгляните на этот пример (он не мой). Я думаю, что проблема в том, что вы инициализируете carousel из ngOnInit, но это слишком рано, поскольку дочерний компонент не будет отображаться в этот момент.

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