Question

最近我一直在编码应用程序的前端。我一直在使用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>

My Angular site index.html 不幸的是，我看不出有什么问题。我已经导入了主题，并且已经在index.html中链接了来自Google的“材质图标”。非常感谢您的帮助。

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

Answer 1

对所有疲倦的访客而言，这是我无法企及的秘密监督。我只是错过了在styles.css类中导入主题的机会，今天我将上传我的MCV示例。必须始终对小小的疏忽保持警惕！

styles.css（之前）（它是空的。）

styles.css（之后）

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

Answer 2

这是“角度材料”按钮:hover的{{1}}操作。请参见其在https://material.angular.io/components/button/overview上的官方mat-button示例，如果将光标悬停在按钮上，则mat-button标签下的<div class="mat-button-ripple mat-ripple" matripple=""></div>标签中将有一个<button>。造成<span>效应的是mat-button-ripple。

了解波纹的原因后，您可以尝试多种方法来覆盖样式。一种极端的方法是使用:hover组合器覆盖特定页面上的::ng-deep。

7月31日编辑：我犯了一个错误。造成此效果的是另一个元素mat-button-ripple。 <div class="mat-button-focus-overlay"></div>的样式为.mat-button-focus-overlay

要使用background-color: rgba(255,215,64,.12);组合器修复样式，请将此样式添加到组件样式文件::ng-deep。

app.component.css

为什么我的Angular 6按钮没有荡漾？

2 个答案: