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