Question

我试图通过遵循其Plunker代码来复制this documentation example中的简单Angular材质滑块。

但我的滑块不会滑动。我只能跳到点击的位置。但它不会点击并拖动。

我一直在寻找Plunker代码，试图找到我失踪的东西。当我检查并将我的结果页面与Chrome开发者工具中的示例进行比较时，我没有看到＆＃34; md-slider-sliding＆＃34; class出现在我的元素中，就像在示例中一样。不知怎的，我没有产生或捕捉那个事件。我希望我能够显示诊断所需的所有相关代码。（我不会发布很多问题所以请在必要时进行编辑以进行改进。）

应用-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 '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

Answer 1

嗯，事实证明导入订单在@NgModule中很重要。首先使用MaterialModule.forRoot（），滑块不会滑动。把它放在最后使它正常工作。谁知道！

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

Plunker

Angular 2 Slider示例不会滑动

1 个答案: