问题描述
我有这样一个场景,当 Lottie 动画结束时,按钮的文本和布局应该改变。例如,TEXT 1 没有填充示例。 fill="clear"
,动画停止后,TEXT 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');
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)