[英]ngx-bootstrap CarouselModule not working
I am trying to use carousel module in my angular2 application.我正在尝试在我的 angular2 应用程序中使用轮播模块。 here is my app.ts file.
这是我的 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 is my home.component.ts and home.component.html in which i am using the module 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 File 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>
when I am running the code it throwing following error.当我运行代码时,它会抛出以下错误。
'slide' is not a known element: 1. If 'slide' is an Angular component, then verify that it is part of this module.
'slide' 不是已知元素: 1. 如果 'slide' 是 Angular 组件,则验证它是该模块的一部分。 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
2. 要允许任何元素添加“NO_ERRORS_SCHEMA”到该组件的“@NgModule.schemas”。 (" [ERROR ->]
(" [错误->]
Any help would be appriciated任何帮助都会得到帮助
Change改变
From从
import {CarouselModule} from 'ngx-bootstrap/carousel';
To至
import { CarouselModule } from 'ngx-bootstrap';
Because import { CarouselModule } from 'ngx-bootstrap/carousel';
因为 import
{ CarouselModule } from 'ngx-bootstrap/carousel';
does not work with system.js
不适用于
system.js
also add it under EventModule
imports.还将它添加到
EventModule
导入下。 And import EventModule
inside app.module.ts并在 app.module.ts 中导入
EventModule
I don't know who through the same problem but here is the issue我不知道谁遇到了同样的问题,但这是问题所在
in your homecomponnent.ts在你的 homecomponnent.ts
import { CarouselConfig } from 'ngx-bootstrap/carousel';从 'ngx-bootstrap/carousel' 导入 { CarouselConfig };
and in your @component add this line并在你的@component 添加这一行
providers: [ { provide: CarouselConfig, useValue: { interval: 2500, noPause: true, showIndicators: true } } ] })提供者:[{提供:CarouselConfig,useValue:{间隔:2500,noPause:true,showIndicators:true}}]})
if you want to change the second of the slide you just need to change the interval number如果你想改变幻灯片的第二个,你只需要改变间隔号
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.