Угловой материал мат-рябь не работает

Question

Я пытаюсь добавить волновой эффект к одной кнопке, но он разрушает всю веб-страницу. Когда я просто добавляю matRipple к моей кнопке, ничего не происходит. Когда я пытаюсь добавить цвет [matRippleColor]="white", я получаю "Невозможно связать с 'matRippleColor', так как это не известное свойство 'button'" .

Это странно, потому что я включил рябь на другой странице сайта, и она работает просто отлично. (Так что да, я импортировал MatRippleModule):

HTML:

<button  matRipple class="submit-button" color="accent" type="submit" >
  <mat-icon>search</mat-icon><span>Szukaj</span>
</button>

Answer 1

Это потому, что входное свойство matRippleColor ожидает строку, и вы передаете переменную, которую Angular предположил, что вы инициализировали ранее, и в этом случае у вас есть переменная, которая, как я предполагал, не существует в вашем компоненте.

Если вы хотите, чтобы белый цвет был распознан, вы должны передать его как строку, поскольку вы используете функцию привязки:

[matRippleColor]="'white'"

или вы можете удалить фигурные скобки и использовать их следующим образом:

matRippleColor="white"

Answer 2

Когда вы используете [matRippleColor]="white", Angular оценивает "white" как выражение шаблона. Поскольку вы не определили переменную white в своем компоненте, это оценивается как undefined. Если вы хотите передать белый цвет в [matRippleColor], вам нужно передать его в виде строки, как показано ниже

<button matRipple [matRippleColor]="'white'" type="submit" class="submit-button">
    <mat-icon>search</mat-icon><span>Szukaj</span>
</button>

Возможно, проблема связана с используемой версией @angular/material. MatRippleModule работает немного по-разному для разных версий @angular/material

MatRippleModule был представлен в Angular Material 6, поэтому он не будет работать с версиями 5 и ниже.

В Angular Material 6 пульсации перетекают за пределы вашего элемента. Это можно исправить, добавив position: relative к элементу CSS, как показано ниже

.submit-button {
    position: relative;
}

В Angular Material 7 свойство CSS position: relative добавлено в класс .mat-ripple библиотеки, поэтому нет необходимости добавлять position: relative к элементу в вашем CSS. То же самое касается углового материала 8.

Вот простой пример StackBlitz в Angular 7, где вы можете динамически изменять цвет. Для получения постоянного цвета просто измените [matRippleColor]="rippleColor" на [matRippleColor]="'white'" или любой другой цвет по вашему выбору.