Question

我正在尝试在我的angular2应用程序中使用轮播模块。这是我的app.ts文件。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {CarouselModule}  from 'ngx-bootstrap/carousel';
import { AppComponent } from './app.component';
import {AppRoutesModule} from './app.routes';
import { NavbarComponent } from './shared/components/navbar/navbar.component';

@NgModule({
  declarations: [
  AppComponent,
  NavbarComponent,
],
imports: [
  BrowserModule,
  AppRoutesModule,
  FormsModule,
  CarouselModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Bellow是我的home.component.ts和home.component.html，我在其中使用模块

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

HTML文件

<carousel>
  <slide>
    <img src="assets/images/wedding.jpg" alt="First slide" style="display: block; width: 100%;">
  </slide>
  <slide>
    <img src="assets/images/birthday.jpg" alt="Second slide" style="display: block; width: 100%;">
  </slide>
  <slide>
    <img src="assets/images/anniversary.jpg" alt="Third slide" style="display: block; width: 100%;">
  </slide>

当我运行代码时，它会抛出以下错误。

'slide'不是已知元素： 1.如果'slide'是Angular组件，则验证它是否为此模块的一部分。 2.要允许任何元素将'NO_ERRORS_SCHEMA'添加到此组件的'@NgModule.schemas'。（” [错误 - ＆gt;]

任何帮助都是适当的

Answer 1

更改

这

import {CarouselModule}  from 'ngx-bootstrap/carousel';

要

import { CarouselModule } from 'ngx-bootstrap';

因为导入 { CarouselModule } from 'ngx-bootstrap/carousel'; 不适用于 system.js

也会在 EventModule 导入下添加它。并在app.module.ts

中导入 EventModule

ngx-bootstrap CarouselModule无法正常工作

1 个答案: