Как создать ползунок диапазона в angular 5

Я попробовал ng2-ion-range-slider и ng2-nouislider, используя документацию, описанную в github. Когда я добавляю этот компонент, он показывает «это не известный элемент ngModule». Я импортирую ng2-nouislider, ng2-ion-range-slider в свой модуль приложения.

МОДУЛЬ ПРИЛОЖЕНИЯ

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, добавлен компонент ползунка ионного диапазона. но он показывает ошибку синтаксического анализа шаблона. ion-range-slider не является известным элементом

<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>

person Ashok    schedule 09.04.2018    source источник
comment
Можете ли вы показать свой app.module?   -  person bugs    schedule 09.04.2018
comment
@bugs я только что перечислил это выше   -  person Ashok    schedule 09.04.2018


Ответы (1)


Кажется, в моем случае все работает нормально после установки необходимых зависимостей, посмотрите мою рабочую демонстрацию.

Не забудьте включить NouisliderModule в импорт вашего app.module и @import "~nouislider/distribute/nouislider.min.css"; в ваш styles.css

person bugs    schedule 09.04.2018
comment
Это не работает, не могли бы вы прислать мне свой скайп-идентификатор. у меня есть скриншоты - person Ashok; 09.04.2018
comment
Можно поподробнее, что именно не работает? Вы видите ошибки? Вы проверили мой пример? - person bugs; 09.04.2018
comment
package.json ng2-nouislider: 1.7.7 style.css @import ~nouislider/distribute/nouislider.min.css; appmodule import {NouisliderModule} из 'ng2-nouislider'; и в моем component.html ‹nouislider [мин]=0 [макс]=10 [шаг]=0,05 [(ngModel)]=someRange›‹/nouislider› - person Ashok; 09.04.2018
comment
Да, я тоже пользуюсь этой версией - person bugs; 09.04.2018
comment
Показана ошибка: core.js: 1440 ERROR Error: Uncaught (in promise): Ошибка: ошибки синтаксического анализа шаблона: невозможно привязать к 'min', так как это не известное свойство 'nouislider'. ( ‹/mat-autocomplete› ‹/mat-form-field› ‹nouislider [ОШИБКА -›][min]=0 [max]=10 [step]=0.05 [(ngModel)]=someRange›‹/nouislider› - person Ashok; 09.04.2018
comment
Файл app.module, который вы разместили в OP, включал только IonRangeSliderModule, вы изменили его, чтобы использовать NouisliderModule ? - person bugs; 09.04.2018
comment
Да, я перешел на NouisliderModule в своем модуле приложения. - person Ashok; 09.04.2018
comment
Давайте продолжим обсуждение в чате. - person bugs; 09.04.2018
comment
Спасибо за вашу ценную помощь - person Ashok; 09.04.2018