Question

当我尝试在窗体中包含角材滑块时，即使我将所有必要的模块导入了app.module.ts中，也没有出现错误但该滑块不可见。

我的错误是什么？我希望有人可以帮助我。

组件HTML：

<html>
    <div class="addtask">
        <form>
           Task: <input type="text" ><br/>
           Parent Task: <input type="text"><br/>
           Priority :<mat-slider></mat-slider>
           Start Date: <input type="date time"><br/>
           End Date: <input type="date time"><br/>
        </form>
    </div>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatTabsModule } from '@angular/material';
import {MatSliderModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AddtaskComponent } from './addtask/addtask.component';

@NgModule({
  declarations: [
    AppComponent,
    AddtaskComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTabsModule,
    MatSliderModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我建议您阅读滑块文档： https://material.angular.io/components/slider/overview

并遵循stackblitz中的示例： https://stackblitz.com/angular/ayvjmxgegkr?file=app%2Fslider-overview-example.ts

我知道答案不明确，但是完整的配置和示例已经可以在那儿找到，所以我希望这足够了。

Answer 2

首先，您实际上需要安装angular material。

对于npm，它是：npm install --save @angular/material @angular/cdk @angular/animations
对于纱线，应该为yarn add @angular/material @angular/cdk @angular/animations。

Here是该参考的链接。

如果您拥有所有这些内容（以及app.module.ts中的包含内容，但我确实看到了），则可能是缺少样式。角形材质组件需要一个样式主题，您可以阅读有关here的信息。如果您只是想快速入门（请务必阅读该链接），只需将以下行复制：@import '@angular/material/prebuilt-themes/deeppurple-amber.css';到您的style.css或（如果使用scss的话）复制到您的{{ 1}}。

希望我能为您提供帮助并欢迎您使用StackOverflow：）

如何使用角度滑块？

2 个答案: