Почему ожидаемый стиль кнопки материала применяется не сразу, когда мое приложение Angular загружается, а только позже?

В приложении Angular, которое я создаю, у меня есть компонент панели инструментов с тремя ссылками. Первый ведет к приложению, остальные - к другим компонентам. Оба элемента ссылки были применены class="mat-button", потому что я хотел использовать существующий стиль.

Первый компонент содержит кнопку с атрибутом mat-raised-button.

Второй компонент просто содержит текст.

При первоначальной загрузке приложения панель инструментов выглядит некрасиво.

При нажатии на вторую ссылку загружается второй компонент, но панель инструментов все еще некрасива.

При нажатии на первую ссылку загружается первый компонент, и панель инструментов выглядит намного лучше.

Если затем щелкнуть «Домой», я вернусь на страницу приложения, и панель инструментов будет по-прежнему выглядеть хорошо.

Что я вижу на панели инструментов, так это то, что к элементам ссылок изначально применено очень мало стиля:

Как только я щелкнул первую ссылку, к ним применили гораздо больше стиля:

Но я подумал, что если я загружу модуль в AppModule, загрузится весь модуль, включая все доступные стили.

Как сделать так, чтобы панель инструментов тоже изначально была красивой? Я мог бы просто использовать что-то другое, кроме кнопки-коврика, но мне искренне любопытно, почему проявляется такое поведение.

StackBlitz с соответствующим кодом: https://stackblitz.com/edit/angular-wwlrtv


angular css angular-material
person Monopole Magnet    schedule 24.07.2019    source источник
comment
Все, что я вижу, выводится по данной ссылке .... мы можем увидеть ваш код?   -  person Kenny    schedule 24.07.2019
comment
можешь поделиться кодом?   -  person Sivuyile TG Magutywa    schedule 24.07.2019
comment
Хотите знать, относится ли это к stackblitz или вы испытываете это, когда запускаете это приложение на своем локальном ПК?   -  person Akber Iqbal    schedule 24.07.2019
comment
То же самое происходит и при локальном запуске приложения, так что это не Stackblitz. Я обновил ссылку, чтобы перейти к редактору кода.   -  person Monopole Magnet    schedule 24.07.2019

Ответы (2)


arrow_upward
1
arrow_downward

Я изменил панель инструментов с

<mat-toolbar>
  <a routerLink="" routerLinkActive="active" class="mat-button">Home</a>
  <a routerLink="path1" routerLinkActive="active" class="mat-button">Link 1 - Style is applied</a>
  <a routerLink="path2" routerLinkActive="active" class="mat-button">Link 2 - Nothing happens</a>
</mat-toolbar>

to

<mat-toolbar>
  <a routerLink="" routerLinkActive="active" mat-button>Home</a>
  <a routerLink="path1" routerLinkActive="active" mat-button>Link 1 - Style is applied</a>
  <a routerLink="path2" routerLinkActive="active" mat-button>Link 2 - Nothing happens</a>
</mat-toolbar>

и это устранило проблему.

person Schrader    schedule 24.07.2019
comment
Очень хороший момент! material.angular.io/components/button/overview Я должен использовать атрибуты для кнопки Styling, а Material должен позаботиться о том, чтобы преобразовать его в стиль для меня. - person Monopole Magnet; 25.07.2019

arrow_upward
0
arrow_downward

Я только что получил его с новой установкой Angular 11. Все по правилам, значения по умолчанию, до сих пор были близки к копированию и вставке элементов из документации по материалам. Внезапно я понял, что панель инструментов mat (MatToolbarModule) не имеет стилей и выглядит как пробел на странице:

введите описание изображения здесь

После первого нажатия любой кнопки стили загрузятся и останутся до следующей перезагрузки страницы. Мне пришлось вернуться и проверить настройку, и я обнаружил, что MatCheckboxModule не был импортирован. Ошибок / предупреждений компиляции не было.

Не импортированный модуль приведет к нарушению стилей, принадлежащих другим модулям. Все модули должны быть импортированы.

После импорта модуля Checkbox стиль стал нормальным.

введите описание изображения здесь

person sr9yar    schedule 18.02.2021