Angular 2 Slider示例不會滑動

我試圖通過遵循其Plunker代碼來複制this documentation example中的簡單Angular材質滑塊。Angular 2 Slider示例不會滑動

但我的滑塊不會滑動。我只能讓它跳到點擊的位置。但它不會點擊並拖動。

我一直在尋找Plunker代碼試圖找到我失蹤的東西。當我在Chrome Developer工具中檢查並比較我的結果頁面和示例時，我沒有看到「md-slider-sliding」類出現在我的元素中，就像它在示例中一樣。不知何故，我不會生成或捕捉該事件。我希望我顯示所有需要診斷的相關代碼。（我不張貼了很多問題，所以請編輯來改善，如果必要的。）

APP-module.ts

import { FormsModule } from '@angular/forms'; 
import { MaterialModule } from '@angular/material'; 
import { AppComponent } from './app.component'; 

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

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
}) 
export class AppComponent { 
    title = 'Slider lab 1!'; 
}

app.component.html

<md-slider></md-slider>

app.component.css

md-slider { 
    width: 300px; 
}

的index.html

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>MaterialLab1</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> 
</head> 
<body> 
    <app-root>Loading...</app-root> 
</body> 
</html>

styles.css的

@import '[email protected]/material/core/theming/prebuilt/deeppurple-amber.css';

來源

2017-01-27 Richard Walker

你能創建一個plunkr與您的代碼 –

好吧，我解決了這個問題。非常令人驚訝和愚蠢的小錯誤。我不知道進口訂單很重要。我從來沒有見過這樣的事情在我的生活中！我會發布答案。 –

嗯，事實證明，進口秩序問題在@NgModule中。隨着MaterialModule.forRoot（）的到來，滑塊不會滑動。把它放在最後使它正常工作。誰知道！

imports: [ 
    BrowserModule, 
    FormsModule, 
    MaterialModule.forRoot() // If this comes first, slider won't slide! 
]

Plunker

來源

2017-01-27 23:42:04

Angular 2 Slider示例不會滑動

回答

相關問題