带有角度材料的角度5 - 按钮波纹效果不起作用

时间：2018-04-25 17:19:51

标签： angular5 angular-material2

我试图应用角度材质的普通按钮，但是纹波效果根本不起作用。

我得到了：

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中链接样式表 - 但仍然不起作用。

6 个答案:

答案 0 :(得分：3)

我遇到了同样的问题，最后我解决了这个问题。 我查看了几个SO帖子，但没有一个在我的案例中有效。 我将在下面展示我的工作方式，因此对于遇到此问题的任何人都有帮助。

上下文

我正在使用Angular网站上的Tutorial: Tour of Heroes，所以我的应用程序相当小而且简单。要使用材料组件，请按照＆＃34;入门＆＃34; Angular Material official website上的页面。我使用Angular CLI，所以我在styles.css中导入了预构建的主题css，导入了MatButtonModule并尝试了<button mat-button>basic</button>，但按钮涟漪效果并没有起作用。

解决方案

在index.html中添加一个类mat-app-background，就像这样

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

按钮中的涟漪效果现在正在运行！

解释请

此解决方案基于Angular Material Theming Guide。在主题实际起作用之前，他们对其他设置有一些说法：

  

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

Angular Material's Getting Started页面未提及此问题。因此，如果您关注该页面并立即测试mat-button，则可能无效。

这对每个人都有用吗？

绝对不是。如果您的情况与我的相似，上述解决方案更有可能奏效。但我会告诉你我之前做了什么，这导致了我的情况。

我使用Angular CLI创建我的Angular应用程序，并按照下面的Getting Started教程进行操作：

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

    3. 在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

      2. 在styles.css 

      @import '~@angular/material/prebuilt-themes/pink-bluegrey.css';
...
      1. 现在在HTML中添加按钮

        2. 在app.component.html 

        ...
<button mat-button>Basic</button>
...

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

        如果我切换到其他预建主题，例如purple-green.css或pink-bluegrey.css，则涟漪效应再次无效。我不确定原因是什么，但可能主题仍未正确配置，因此事情变得无法预测。有时候它有效，有时它不会，这不是一个好兆头，所以让我们继续下一步。

        1. 如果您的涟漪效应与我一样无效，请按照解决方案中的信息和Theming Guide中的说明操作。根据主题指南，您需要元素mat-sidenav-container或类mat-app-background才能正确配置材料主题。最后，涟漪效应现在应该起作用了。

答案 1 :(得分：2)

对我来说，如果您浏览文档，这是一个容易犯的错误。这是我的问题...

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

在这里：
组件或模块 .scss文件...

但需要在这里：
在styles.scss目录中找到的/app文件。

答案 2 :(得分：0)

好吧，我想我可能已经找到一些角度的错误，因为我能够跟踪原因。这是由于在这里使用变量：{{forecasts.list [0] .dt}}温度（摄氏度）：{{weathers.main.temp}}。 - 所以基本上使用{{weathers.main.temp}}打破了整个页面中的动画。 -

答案 3 :(得分：0)

不是OP的解决方案，但这就是导致我的原因：

确保已导入BrowserAnimationsModule： 

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

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

我正在处理的项目已包含NoopAnimationsModule，请首先删除此项目；您不能同时添加它们。

答案 4 :(得分：0)

我有同样的问题。当我使用材质创建按钮时，没有发生波纹效果。后来，我发现我没有在项目中包含任何样式主题。因此，检查何时要在Angular-Material中启动项目以至少包含其预先构建的主题样式表是非常基本但最重要的事情。然后，您将不会错过涟漪效应。这是我解决问题的方法。

答案 5 :(得分：0)

确保已将MatRippleModule导入到该组件的模块中

相关问题
最新问题