У меня возникла та же проблема, и я решил проблему в конце.Я посмотрел несколько SO сообщений, но ни один из них не работает в моем случае.Ниже я покажу, как я это сделал, так что это может помочь любому, кто сталкивался с проблемой.
Context
Я работал над учебником : Tour of Heroes inСайт Angular, так что мое приложение было довольно маленьким и простым.Чтобы использовать компоненты материала, я следую за страницей «Начало работы» на официальном сайте Angular Material .Я использую Angular CLI, поэтому я импортировал готовую тему css в styles.css, импортировал MatButtonModule и попробовал <button mat-button>basic</button>, но эффект ряби кнопок просто не работал.
Решение
В index.html добавить класс mat-app-background к телу, подобному этому
<body class="mat-app-background">
...
</body>
И эффект пульсации в кнопке теперь работает!
Объяснение Пожалуйста,
Это решение основано на Руководстве по тематике угловых материалов .У них есть несколько слов о дополнительных настройках до того, как тема действительно заработает:
Наконец, если содержимое вашего приложения не помещено внутри элемента mat-sidenav-container, вам нужно добавить класс mat-app-background вваш элемент обертки (например, body).Это гарантирует, что правильный фон темы будет применен к вашей странице.
Это не упоминается на странице Angular Material Getting Started .Так что, если вы перейдете на эту страницу и сразу же протестируете mat-button, это может не сработать.
Это работает для всех?
Определенно нет.Решение выше, скорее всего, сработает, если ваша ситуация похожа на мою.Но я покажу вам, какой шаг я сделал раньше, что приводит к моей ситуации.
Я использую Angular CLI для создания своего приложения Angular, и я следовал учебному пособию Getting Started , как показано ниже:
- Я установил эти пакеты:
@angular/material @angular/cdk @angular/animations - Я импортировал
MatButtonModule в app.module.ts.
В 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.
],
...
})
Импорт готовых тем CSS
В styles.css
@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';
...
Теперь добавьте кнопку в HTML
В app.component.html
...
<button mat-button>Basic</button>
...
И я нажал на кнопку и эффект ряби не сработал.Так что я застрял здесь.Но странно то, что если я переключаюсь на предварительно созданную тему deeppurple-amber.css, тогда пульсация работает без применения Solution выше.
Если я переключаюсь на другие предварительно созданные темы, такие как purple-green.css или pink-bluegrey.css, волновой эффект снова не работает.Я не уверен, в чем причина, но, вероятно, тема все еще не настроена должным образом, поэтому все становится непредсказуемым.Иногда это работает, иногда нет, что не является хорошим знаком, поэтому давайте перейдем к следующему шагу.
Если ваш волновой эффект не работал до сих пор, как я, следуйте информации в
Solution и инструкциям в
Theming Guide .Согласно руководству по тематике, вам нужно либо элемент
mat-sidenav-container, либо класс
mat-app-background, чтобы правильно настроить тематику материала.Тогда, наконец, волновой эффект должен сработать.