有角材质SlideToggle不滑动

Question

我有一个 Angular 组件（“新形式”），它具有来自 Angular Material 的滑动切换。滑动切换在客户端上呈现，但当我单击它时没有任何反应。

我已经安装了 Angular Material，它存在于我的 package.json (^17.0.4) 中。请解释为什么滑动切换不起作用。

这里是new-form.component.html：

<mat-slide-toggle>Slide me!</mat-slide-toggle>

并且，这是 new-form.component.ts：

import {Component} from '@angular/core';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';

@Component({
  selector: 'app-new-form',
  templateUrl: 'new-form.component.html',
  standalone: true,
  imports: [MatSlideToggleModule],
})
export class NewFormComponent {}

Answer 1

您错过了在

global-styles.css

中添加 CSS

/* Add application styles & imports to this file! */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

堆栈闪电战

Answer 2

问题出在我的

index.html

文件中。这个顺风脚本标签显然与 Angular Material 冲突。我从文件中删除了以下行，并且滑动切换正常工作。

<script src="https://cdn.tailwindcss.com"></script>