#css #angular #ionic-framework #ng-class
Вопрос:
У меня есть такой сценарий, в котором, когда анимация Лотти заканчивается, текст и расположение кнопки должны измениться. Пример, ТЕКСТ 1 не имеет заливки fill="clear"
, например , после остановки анимации ТЕКСТ 2 должен появиться с цветом заливки, например. . color="primary"
Я попытался использовать ngClass для изменения css текста, но, к сожалению, это не работает. Коды приведены ниже. Я также попытался добавить !important
, но по-прежнему никаких изменений. Надеюсь, вы сможете мне помочь. Спасибо
.css
.skipbtn {
display: block;
font-family: 'Archivo';
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 16px;
align-items: center;
text-align: center;
letter-spacing: 0.2px;
--color: #0e82c1 !important;
--background: #f2f8f6 !important;
}
.homebtn {
display: block;
height: 46px;
font-family: 'Archivo';
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 22px;
align-items: center;
text-align: center;
letter-spacing: 0.2px;
--color: #ffffff !important;
--background: #0e82c1 !important;
--border-radius: 50px !important;
}
.html
<ion-button [ngClass]="{'skipbtn': skipButtonSource,'homebtn': !skipButtonSource}" routerLink="/home" fill="clear">
{{skipButtonObservable$|async}}
</ion-button>
.ts
public skipButtonSource: BehaviorSubject<string> = new BehaviorSubject(
'Skip to Homepage'
);
complete(event): void {
this.skipButtonSource.next('Home');
this.cdr.detectChanges();
console.log('loop done');
}
Комментарии:
1. вы делаете это неправильно. Попробуй
[ngClass]=" skipButtonSource ? 'skipbtn' : 'homebtn' "