Question

我是Angular的新手，正在实现，我遇到了问题。我将实现成功地导入了Angular中，实现了css元素可以工作，但是js元素却不能。轮播和其他元素（例如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页面上，甚至从materilize网站上放入jquery代码。但也没有帮助。

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

一切似乎都被导入了，但是我不知道为什么它不起作用。我怎么了谢谢！

Answer 1

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

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

物化CSS轮播在Angular中不起作用

1 个答案: