css - 如何在窗口按 Angular 缩放时更新样式

Question

我的应用程序上有一个聊天窗口，当聊天窗口小于特定宽度时，我想更新此聊天窗口中图像的大小。有没有一种方法可以根据宽度更新 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}">

但是，这不起作用，我的控制台似乎甚至没有收到错误

Answer 1

使用

<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”输入属性没有值而引起的。