我得到的ng2-slider是不在Angular 2 CLI项目中工作。有关更多信息，请查看以下屏幕截图。
错误：
在 angular-cli.json
{
"project": {
"version": "1.0.0-beta.15",
"name": "testbed-app"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/angular2-calendar/scss/angular2-calendar.scss",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/jquery-knob/dist/jquery.knob.min.js",
"../node_modules/moment/moment.js",
"../node_modules/fullcalendar/dist/fullcalendar.min.js",
"../node_modules/angular2-calendar/dist/umd/angular2-calendar.js",
"../node_modules/ng2-slider-component/ng2-slider.component.js",
"../node_modules/ng2-slideable-directive/slideable.directive.js",
"../node_modules/ng2-styled-directive/ng2-styled.directive.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [
"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false
}
}
然后在 package.json
{
"name": "testbed-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"angular2-calendar": "^0.3.3",
"angular2-ui-switch": "^1.1.0",
"bootstrap": "^3.3.7",
"bootstrap-slider": "^9.2.0",
"core-js": "^2.4.1",
"font-awesome": "^4.6.3",
"fullcalendar": "^3.0.1",
"jquery": "^3.1.1",
"jquery-knob": "^1.2.11",
"moment": "^2.15.1",
"ng2-slideable-directive": "^1.0.13",
"ng2-slider-component": "^1.0.9",
"ng2-styled-directive": "^1.0.5",
"primeng": "^1.0.0-beta.17",
"primeui": "^4.1.15",
"rxjs": "5.0.0-beta.12",
"tether": "^1.3.7",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@types/jasmine": "^2.2.30",
"angular-cli": "1.0.0-beta.15",
"codelyzer": "~0.0.26",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.5",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.2"
}
}
然后在 app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routes';
import { AppComponent } from './app.component';
import { HeaderComponent } from './template/header/header.component';
import { ConfigurationComponent } from './view/configuration/configuration.component';
import { Ng2SliderComponent } from "ng2-slider-component/ng2-slider.component";
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
ConfigurationComponent,
Ng2SliderComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
然后在 configration.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-configuration',
templateUrl: './configuration.component.html',
styleUrls: ['./configuration.component.css']
})
export class ConfigurationComponent implements OnInit {
constructor() { }
ngOnInit() {
}
plainValueChanged(event, container:any) {
var el = this.getElement(container);
//el.innerText = event.startValue;
}
getElement(data){
if (typeof(data)=='string') {
return document.getElementById(data);
}
if (typeof(data)=='object' && data instanceof Element) {
return data;
}
return null;
}
}