我使用 github 中描述的文档尝试了 ng2-ion-range-slider 和 ng2-nouislider。 当我添加这些组件时,它显示“它不是 ngModule 的已知元素” 我在我的应用程序模块中导入 ng2-nouislider、ng2-ion-range-slider
APP MODULE
import 'hammerjs';
import {SharedModule} from './core/modules/shared.module';
import {AppComponent} from './app.component';
import {VoifinityMainModule} from './main/main.module';
import {FuseSplashScreenService} from './core/services/splash-screen.service';
import {VoifinityConfigService} from './core/services/config.service';
import {FuseNavigationService} from './core/components/navigation/navigation.service';
import {AppRoutingModule} from './app-routing.module';
import {AuthenticationModule} from './authentication/authentication.module';
import {VoifinityAuthInterceptor} from './core/auth/voifinity-auth.interceptor';
import {AuthService} from './core/auth/auth.service';
import {AuthGuardService} from './core/auth/auth-guard.service';
import {SimpleNotificationsModule} from 'angular2-notifications';
import {AppService} from './app.service';
import {NgHttpLoaderModule} from 'ng-http-loader/ng-http-loader.module';
import {IonRangeSliderModule} from 'ng2-ion-range-slider';
@NgModule({
declarations: [
AppComponent
],
imports : [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
AppRoutingModule,
SharedModule,
SimpleNotificationsModule.forRoot(),
AuthenticationModule,
VoifinityMainModule,
NgHttpLoaderModule,
IonRangeSliderModule
],
providers : [
AuthService,
AppService,
AuthGuardService,
{
provide: HTTP_INTERCEPTORS,
useClass: VoifinityAuthInterceptor,
multi: true
},
FuseSplashScreenService,
VoifinityConfigService,
FuseNavigationService
],
bootstrap : [
AppComponent
]
})
export class AppModule
{
}
app.component.html, added ion-range slider component. but it shows template parse error. ion-range-slider is not a known element
<ion-range-slider #sliderElement
type="double"
[min]="myMinVar"
max="100"
from="28"
from_min="10"
from_max="30"
from_shadow="true"
to="40"
to_min="40"
to_max="90"
to_shadow="true"
grid="true"
grid_num="10"
prefix="Weight: "
postfix=" million pounds"
decorate_both="false"
(onUpdate)="myOnUpdate($event)"
(onChange)="myOnChange($event)"
(onFinish)="myOnFinish($event)"></ion-range-slider>
最佳答案
在安装所需的依赖项后,在我的情况下似乎工作正常,看看我的 working demo .
不要忘记在 app.module 的导入中包含 NouisliderModule
,并在导入中包含 @import "~nouislider/distribute/nouislider.min.css";
你的styles.css
关于angular5 - 如何在 Angular 5 中创建范围 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49727195/