我的应用程序上有一个聊天窗口,当聊天窗口小于特定宽度时,我想更新此聊天窗口中图像的大小。有没有一种方法可以根据宽度更新 css 样式或类?
我正在使用 typescript 并传入我的猫窗口的值:
@Input()
public chatWidth: number;
在我的 html 中,我试图做这样的事情,如果 chatWidth 属性小于 400,我将应用一个 css 类:
<img *ngIf="upsell?.image?.url; let url" [src]="url" ng-class="{bigger-img : chatWidth < 400}">
但是,这不起作用,我的控制台似乎甚至没有收到错误
最佳答案
使用
<img *ngIf="upsell?.image?.url; let url" [src]="url" [ngClass]="{'bigger-img': chatWidth < 400}">
更多信息 here在 ngClass
上。
更新
我相信,您可以将条件包装在一个“方法”中,该方法返回在您各自的组件中定义的 boolean
并在模板中调用它,而不是直接在模板中声明它。在这里,在你的情况下,
在 component.ts 中,
checkChatWidth(): boolean {
return this.chatWidth < 400;
}
然后,在您的模板中,
<img *ngIf="upsell?.image?.url; let url" [src]="url" [ngClass]="{'bigger-img': checkChatWidth()}">
您必须注意您的“方法”中可能出现的“空”检查,这些检查可能是由于您的代码设置中的“chatWidth”输入属性没有值而引起的。
关于css - 如何在窗口按 Angular 缩放时更新样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48994829/