Защо очакваният стил на бутон Material не се прилага веднага, когато моето Angular приложение се зареди, а само по-късно?

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

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

Вторият компонент съдържа само текст.

Когато приложението се зареди първоначално, лентата с инструменти изглежда грозна.

Когато щракнете върху втората връзка, вторият компонент се зарежда, но лентата с инструменти все още е грозна.

Когато щракнете върху първата връзка, първият компонент се зарежда и лентата с инструменти изглежда много по-добре.

Ако след това щракна върху Начало, се връщам на страницата на приложението и лентата с инструменти все още изглежда добре.

Това, което виждам в лентата с инструменти е, че елементите на връзката имат много малко стил, приложен първоначално:

След като щракна върху първата връзка, те имат много повече стил:

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

Как мога да направя така, че лентата с инструменти също да е красива първоначално? Бих могъл просто да използвам нещо различно от mat-button, но съм искрено любопитен защо се проявява това поведение.

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 Трябва да използвам атрибути за бутона стайлинг, а Материалът трябва да се погрижи да го превърне в стил за мен. - person Monopole Magnet; 25.07.2019

arrow_upward
0
arrow_downward

Току-що го имах с нова инсталация на Angular 11. Всичко е според правилата, стойности по подразбиране, досега бяха близо до копиране и поставяне на елементи от материалните документи. Изведнъж разбрах, че лентата с инструменти mat (MatToolbarModule) няма стилове и се появява като бяло пространство на страницата:

въведете описание на изображението тук

След първото щракване върху произволен бутон, стиловете ще се заредят и ще останат до следващото презареждане на страницата. Трябваше да се върна и да проверя настройката и открих, че MatCheckboxModule не е импортиран. Нямаше грешки/предупреждения при компилиране.

Неимпортираният модул би нарушил стиловете, които принадлежат на други модули. Всички модули трябва да бъдат импортирани.

След импортирането на модула Checkbox стилът стана нормален.

въведете описание на изображението тук

person sr9yar    schedule 18.02.2021