Mat-slide-toggle 看起来像普通复选框

Question

我的角度页面上有一个mat-slide-toggle 。 我在模块中导入了适当的值，但是一旦页面加载，切换就会显示为一个普通的复选框。

HTML：

<div style="width:100%;overflow:hidden">
<h5 class="mx-2 mb-0" style="width:50%;float:left;clear:none">Suggested Titles</h5>
<mat-slide-toggle
  style = "float:right;width:30%"
  [color]="color"
  [checked]="checked"
  (change)="andOrBoxChecked()"
  [disabled]="disabled"> {{slideValue}}
</mat-slide-toggle>
</div>

打字稿：

import { Component, OnInit, NgModule } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
[...]
  color = 'accent';
  checked = true;
  disabled = false;
  slideValue = "And";
[...]
  andOrBoxChecked(){
    if(this.slideValue == 'And')
      this.slideValue = 'Or';

    else  
      this.slideValue='And';
  }

模块：

import { MatSlideToggleModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
[...]
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule, //Here
        routing,
        HttpClientModule,
        FormsModule,
        NgSelectModule,
        AlertModule.forRoot(),
        ButtonsModule.forRoot(),
        CollapseModule.forRoot(),
        // BsDatepickerModule.forRoot(),
        ModalModule.forRoot(),
        PaginationModule.forRoot(),
        TooltipModule.forRoot(),
        TypeaheadModule.forRoot(),
        MdcDrawerModule,
        MdcIconModule,
        MdcListModule,
        MatSlideToggleModule, //And here
        NgxChartsModule,
        SharedModule
    ],

显然，这应该类似于滑动切换，而不仅仅是一个简单的复选框。

Answer 1

您需要在css/scss文件中添加由 Angular Material 提供的基本样式表。

请在您的styles.css文件中添加以下行。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

或者

如果您没有使用 Angular CLI，您可以通过index.html的<link>元素包含一个预构建的主题。

查看入门文档并按照第 4 步：包括主题的主题部分。