角2スライダの例がスライドしません

私は単純な角度の材料スライダをthis documentation exampleにレプリケートしようとしています。角2スライダの例がスライドしません

しかし、私のスライダーはスライドしません。私はそれをクリックした位置にジャンプすることしかできません。しかし、クリックしてドラッグすることはありません。

私が紛失しているものを見つけようとしているPlunkerコードを見ています。結果のページとChrome Developerツールの例を比較して比較すると、例のように「md-slider-sliding」クラスが要素に表示されません。どういうわけか私はその出来事を生成したり捕まえたりしていません。診断に必要なすべてのコードが表示されていることを願っています。（私は多くの質問を投稿していないので、必要に応じて改善するために編集してください。）

アプリ-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

[OK]をあなたのコード –

とplunkrを作成することができ、私はそれを解決しました。非常に驚くばかばかしい小さなバグ。私は輸入注文が重要であることを知らなかった。私は私の人生でこのような事を見たことがない！私は答えを投稿します。 –

、その輸入の注文事項が判明@NgModuleの中で。 MaterialModule.forRoot（）が最初に来ると、スライダーはスライドしません。最後に置くと正しく動作します。誰かわかったね！

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

Plunker

出典

2017-01-27 23:42:04

角2スライダの例がスライドしません

答えて

関連する問題