时间戳

首页 > 解决方案 > 为什么我的 Angular 6 按钮没有波纹？

angular - 为什么我的 Angular 6 按钮没有波纹？

问题描述

最近我一直在编写应用程序的前端。我一直在使用 Angular 6 来构建它，但我注意到我的按钮有一个小的偏差。当您将鼠标悬停在它们上方时它们会变暗，但是当您单击它们时它们不会产生任何涟漪效应。这是我的 app.module.ts。

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {Routes} from '@angular/router';
import { AppComponent } from './app.component';
import {
  MatToolbarModule, MatButtonModule, MatInputModule, MatIconModule, MatSelectModule, MatTableModule, MatGridListModule,
  MatCardModule, MatMenuModule, MatFormFieldModule, MatOptionModule
} from '@angular/material';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import {HttpClientModule } from '@angular/common/http';
import { RegisterComponent } from './register/register.component';
import {FormsModule} from '@angular/forms';
import {ReactiveFormsModule} from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import 'hammerjs';




const routes: Routes = [
  {path: 'placeholder', component: PlaceholderComponent},
  {path: 'register', component: RegisterComponent},
];

@NgModule({
  declarations: [
    AppComponent,
    PlaceholderComponent,
    RegisterComponent,
    LoginComponent,
    UserComponent,
    RegisterComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatToolbarModule,
    MatButtonModule,
    MatInputModule,
    MatSelectModule,
    MatTableModule,
    MatIconModule,
    MatFormFieldModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes ),
    MatGridListModule,
    MatCardModule,
    MatMenuModule,
    LayoutModule,
    MatOptionModule
  ],
  exports: [
    MatButtonModule,
    MatCardModule,
    MatMenuModule,
    MatIconModule,
    MatSelectModule,
    MatInputModule,
    MatToolbarModule,
    MatTableModule,
    MatSelectModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatOptionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的 app.component.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
.divider {
  width: 50px;
  height: auto;
  display: inline-block;
}
.mat-card {
  text-align: -webkit-center;
}

.demo-toolbar {
  display: flex;
  align-items: center;
  width: 100%;
}

.demo-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.demo-full-width {
  width: 100%;
}

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}

mat-toolbar-row {
  justify-content: space-between;
}

.done {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
}

.content-center {
  text-align: -webkit-center;
}

这是我的 app.component.html。

<mat-toolbar color="primary">
    <span> A store</span>
  <span class="demo-toolbar"></span>
  <button mat-button color="accent">Register</button>
  <span class="divider"></span>
  <button mat-button >Login</button>
  <span class="divider"></span>
  <button mat-button>See your profile now!</button>
</mat-toolbar>
<mat-card>
  <span>
    This is a shop.
    Login or register above!
  </span>
</mat-card>
<div>
  <router-outlet></router-outlet>
</div>


<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <meta charset="utf-8">
  <title>ClothAppFrontEnd</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="mat-app-background">
  <app-root></app-root>
</body>
</html>

我的 Angular 站点 index.html 不幸的是，我看不出有什么问题。我已经导入了主题，并且在我的 index.html 中链接了来自 Google 的 Material Icons。感激地接受帮助。

你好。这是 StackBlitz 中的 MCV 示例。 https://stackblitz.com/edit/angular-xiapvj

标签： angularangular-material-6

解决方案

对于所有疲倦的游客来说，这是我躲过的秘密疏忽。我只是错过了在我的 styles.css 类中导入我的主题，我今天将上传我的 MCV 示例。必须时刻警惕小疏忽！

styles.css(before) （它是空的。）

样式.css（之后）

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

推荐阅读