logo标签列表

Angular 5与Angular Material - 按钮水波纹效果无法工作

angular5angular-material2
4

我尝试使用Angular Material的普通按钮，但涟漪效果根本不起作用。

我的代码如下：

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'hammerjs';
import 'web-animations-js';
import { MatCheckboxModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material/button';

imports: [
    MatButtonModule,
    MatCheckboxModule,
    BrowserAnimationsModule
  ],
  providers: [WeatherService],
  bootstrap: [AppComponent, WeatherComponentComponent]
})

在全局 styles.css 文件中，我有：@import。
'~@angular/material/prebuilt-themes/deeppurple-amber.css';
dependancies:
"dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "^5.2.10",
    "@angular/compiler": "^5.2.10",
    "@angular/core": "^5.2.10",
    "@angular/forms": "^5.2.10",
    "@angular/http": "^5.2.10",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "^5.2.10",
    "@angular/platform-browser-dynamic": "^5.2.10",
    "@angular/router": "^5.2.10",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"

  "devDependencies": {
    "@angular/cli": "^1.7.4",
    "@angular/compiler-cli": "^5.2.10",
    "@types/jasmine": "^2.8.6",
    "@types/node": "^9.6.6",
    "codelyzer": "^4.3.0",
    "jasmine-core": "^3.1.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^2.0.2",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "^5.3.1",
    "ts-node": "^6.0.0",
    "tslint": "^5.9.1",
    "typescript": "^2.7.0"
  }

HTML：

<button mat-raised-button color="primary">Button</button>

我还尝试将样式表链接到全局HTML中，但仍然不起作用。

你仍需要定义一个主题。你是否包含了Material主题？ - joh04667
当然，我已经在全局CSS中添加了这个主题：'~@angular/material/prebuilt-themes/deeppurple-amber.css'; - makat
你为什么要引导WeatherComponentComponent？通常情况下，只需要引导一个入口组件。尝试将WeatherComponentComponent移到declarations而不是bootstrap中。我猜测它没有获得相关模块的导入，因此需要移动到declarations。 - joh04667
好的，我认为我可能在Angular中发现了一些错误，因为我能够追踪到原因。这是由于在此处使用变量引起的：<div *ngIf="shown;else other_content"> {{forecasts.list[0].dt}} </div> <ng-template #other_content> Temperature (celsius): {{ weathers.main.temp }} 。- 所以基本上在其中使用{{weathers.main.temp}}会破坏整个页面的动画效果。 - makat
6个回答
4

我遇到了相同的问题，最终解决了该问题。 我查看了几篇Stack Overflow文章，但它们都不适用于我的情况。 我将展示我如何解决这个问题，希望能帮助遇到同样问题的人。

背景

我正在Angular网站上使用“英雄之旅”教程，所以我的应用程序非常小且简单。为了使用Material组件，我遵循Angular Material官方网站上的“入门指南”。我使用Angular CLI，在styles.css中导入了预构建的主题css， 并导入了MatButtonModule并尝试使用<button mat-button>basic</button>，但按钮涟漪效果就是不起作用。

解决方法

在index.html中将mat-app-background类添加到body中，如下所示：

<body class="mat-app-background">
...
</body>

现在按钮中的水波纹效果已经生效了！

请解释一下

这个解决方案基于Angular Material主题指南。在主题实际生效之前，他们有一些关于额外设置的说明：

最后，如果您的应用程序内容不放置在mat-sidenav-container元素内，您需要将mat-app-background类添加到您的包装器元素（例如body）。这确保了适当的主题背景应用于您的页面。

这并未在Angular Material入门页面中提到。因此，如果您遵循该页面并立即测试mat-button，它可能无法正常工作。

这对每个人都有效吗？

绝对不是。上述解决方案更有可能在您的情况类似于我的情况时起作用。但是，我会向您展示在我的情况之前我所做的步骤。

我使用Angular CLI创建了我的Angular应用程序，并按照以下方式遵循了入门教程：

  1. 我安装了这些包：@angular/material @angular/cdk @angular/animations
  2. 我在app.module.ts中导入了MatButtonModule。

在app.module.ts中，我有以下内容

...
import {MatButtonModule} from '@angular/material';

@NgModule({
  ...
  imports: [
    BrowserModule,
    ...
    MatButtonModule, // import the Angular Material modules after Angular's BrowserModule, as described in the tutorial.
  ],
  ...
})
  1. 导入预先构建的主题CSS

在 styles.css 中

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';
...

现在在HTML中添加按钮。
在 app.component.html 中。
...
<button mat-button>Basic</button>
...

我点击了按钮，但是涟漪效果没有出现。所以我卡在这里了。但是奇怪的是，如果我切换到预先构建的主题deeppurple-amber.css，那么涟漪就会起作用，而不需要应用上述解决方案。

如果我切换到其他预先构建的主题，如purple-green.css或pink-bluegrey.css，涟漪效果又无法正常工作。我不确定原因是什么，但可能是主题配置仍然不正确，导致事情变得不可预测。有时它可以工作，有时它不行，这并不是一个好兆头，所以让我们继续下一步。

  1. 如果你的涟漪效果像我一样没有工作，请按照解决方案中的信息和主题指南中的说明进行操作。根据主题指南，你需要使用元素mat-sidenav-container或类mat-app-background来正确配置材料主题。然后最后，涟漪效果现在应该可以工作了。
2
对我来说，如果你快速浏览文档，这是一个容易犯的错误。这是我的问题...
这里是：
@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';
但是需要在这里：
位于/app目录中的styles.scss文件。
组件或模块的.scss文件...
2

虽然这不是针对OP的解决方案，但这是导致问题的原因：

确保已导入BrowserAnimationsModule：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [
    BrowserAnimationsModule
  ],
  ...
})

我正在处理的项目中包含NoopAnimationsModule，需要先将其删除；不能同时添加两个动画模块。

0
我曾经遇到过同样的问题。当我使用 Material 创建按钮时，涟漪效果没有出现。后来，我发现在项目中没有包含任何样式主题。因此，在开始 Angular-Material 项目时，检查至少包括其预构建的主题样式表是非常基本但最重要的事情。然后，您就不会错过涟漪效果。这是我解决问题的方法。
0
请确保您已经将MatRippleModule导入到该组件的模块中。
-1

好的，我认为我可能在Angular中发现了一些错误，因为我能够找到原因。它是由于在此处使用变量引起的：{{forecasts.list[0].dt}}温度（摄氏度）：{{weathers.main.temp}}。- 基本上在其中使用{{weathers.main.temp}}会破坏整个页面的动画。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接